无法在条形图上获得阴影 [英] Unable to get drop-shadow on the bars

问题描述

我正在使用条形图，我需要获得图表如下：

这是我试过的：

  .attr（id，drop-shadow）
 .attr（height，130％）; 
  

但不起作用。

jsfiddle

我如何

尝试此 fiddle 。

图表看起来像作为图像。

添加了<$ c

 
 svg.selectAll在创建bar之前，$ c> ellipse  （.ellipse）
 .data（data）
 .enter（）
 .append（ellipse）
 .attr（cx 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;}）
 

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

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

对不起，我没有时间得到对比色的酒吧。但你可以修改它。

如果你想用阴影做。

以下是 链接

希望这有助于。

I am working on a bar chart and I need to get the chart to look like this:

Here is what I tried:

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

but it did not work.

jsfiddle

How do I fix this?

解决方案

Try this fiddle.

Chart looks like that same as the image.

But i didn't do it adding a drop shadow.

Added ellipse before the bar being created and that gives the same effect as above.

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; })

This is very simple. You need to create a ellipse before the bar is created.

When we position the ellipse it acts like a drop shadow.

Sorry that i don't have time to get the contrasting colors of the bar. But you can amend it of course.

If you'd like to do it with a drop shadow.

Here's a link that requires a javascript library for the drop shadow of the svg elements.

Hope this helps.

这篇关于无法在条形图上获得阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！