如何向 dc.js 条形图矩形添加阴影答案

【问题标题】：How to add a drop shadow to dc.js bar chart rects如何向 dc.js 条形图矩形添加阴影
【发布时间】：2014-01-19 13:37:19
【问题描述】：

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

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

我对 d3.js 等还很陌生，因此我们将不胜感激。谢谢

【问题讨论】：

这取决于我猜的图表。你在想哪一个？
嗨，拉尔斯。理想情况下，我真的想将它应用于所有这些，但现在是 dc.barChart 和 dc.rowChart
好吧，您必须像示例中那样创建一个过滤器并将其应用于所有元素。
澄清一下：你没有将<defs>元素添加到矩形中，<defs>存储了过滤器的定义，然后你使用<rect>过滤器样式属性来引用过滤器ID ，如@DJ Martin 的示例所示。由于过滤器不会随代码而改变，您甚至可以在 HTML 标记文件中预定义过滤器，并使用 CSS 将其添加到矩形中。如果您不想更改标记或 CSS，另一种简化的方法是将过滤器代码存储为字符串变量，然后使用 svg.append("defs").html(filterCode) 添加到图形中：jsfiddle.net/kWYY4/1

标签： css d3.js dropshadow dc.js

【解决方案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/ 的示例可以帮助您继续前进。

【讨论】：

看起来不错，尽管您可能希望将过滤器的高度和宽度稍大一些以避免模糊阴影的锐利截断：即使在小条上，高度 150% 宽度 200% 看起来也不错。不幸的是，您不能将过滤器尺寸定义为100% + 20px，这对于这种类型的效果更符合逻辑。