Question

如何在dc.js条形图中添加投影？

我查看了svg过滤器，但不确定如何将其应用于dc.js图表。我一直在查看http://bl.ocks.org/cpbotha/5200394示例添加投影默认，但无法看到如何将defs添加到图表rect.bars。

我对d3.js等很新，所以任何帮助都会非常感激。感谢

Answer 1

以下是将过滤器应用于dc图表的示例： http://jsfiddle.net/djmartin_umich/5Lvcq/

我只是在dc.renderAll（）之后添加了Lars引用的代码。

首先检索图表svg：

 var defs = rowChart.svg().append("defs");

接下来定义过滤器：

var filter = defs.append("filter")
        .attr("id", "drop-shadow")
        .attr("height", "150%")
        .attr("width", "200%");

    filter.append("feGaussianBlur")
        .attr("in", "SourceAlpha")
        .attr("stdDeviation", 5)
        .attr("result", "blur");

    filter.append("feOffset")
        .attr("in", "blur")
        .attr("dx", 5)
        .attr("dy", 5)
        .attr("result", "offsetBlur");

    var feMerge = filter.append("feMerge");

    feMerge.append("feMergeNode")
        .attr("in", "offsetBlur");
    feMerge.append("feMergeNode")
        .attr("in", "SourceGraphic");

最后，将过滤器应用于行：

    rowChart.selectAll("rect")
        .style("filter", "url(#drop-shadow)");

希望http://jsfiddle.net/djmartin_umich/5Lvcq/的示例可以帮助您实现目标。

如何在dc.js条形图中添加投影

1 个答案: