Как добавить тень к столбцам строки dc.js

Question

Как я могу добавить тень на гистограмму dc.js?

Я просмотрел фильтры svg, но не знаю, как я могу применить это к диаграмме dc.js. Я смотрел на примере http://bl.ocks.org/cpbotha/5200394, чтобы добавить фреймы shadow shadow, но не могу посмотреть, как вы можете добавить defs на диаграмму rect.bars.

Я довольно новичок в d3.js и т. Д., Поэтому любая помощь будет принята с благодарностью. благодаря

Answer 1

Ниже приведен пример применения фильтра к диаграмме постоянного тока: http://jsfiddle.net/djmartin_umich/5Lvcq/

я просто добавил код, который Ларс называют после dc.renderAll().

Сначала получить диаграмму 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/ помогает вам двигаться.