javascript - 无法在栏上获得阴影

Question

我正在制作条形图，我需要让图表看起来像这样:

这是我尝试过的:

.attr("id", "drop-shadow")
.attr("height", "130%");

但是没有用。

jsfiddle

我该如何解决这个问题？

Answer 1

试试这个 fiddle .

图表看起来和图片一样。

但我没有添加投影。

在创建柱之前添加了 ellipse，效果与上面相同。

svg.selectAll(".ellipse").data(data).enter().append("ellipse").attr("cx", function(d) { return x(d.age) + 30; }).attr("cy", function(d) { return y(0); }).attr("rx", 35).attr("ry", 5).style("fill", function(d) { return d.color2; })

这很简单。您需要在创建条形之前创建一个椭圆。

当我们放置椭圆时，它就像一个投影。

抱歉，我没有时间获取栏的对比色。但是你当然可以修改它。

如果你想用阴影来做。

这是一个 link这需要一个用于 svg 元素阴影的 javascript 库。

希望这对您有所帮助。