Невозможно получить раскрывающуюся тень на брусьях

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, для которого требуется javascript-библиотека для тени твиновских элементов svg.

Надеюсь, это поможет.