DC.JS Applying a filter after rendering
HTML
<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<div id="rowChart"> </div>
JavaScript
var chartExample = {
initChart: function (experiments) {
var rowChart = dc.rowChart("#rowChart");
experiments.forEach(function (x) {
x.Speed = +x.Speed;
});
var ndx = crossfilter(experiments),
runDimension = ndx.dimension(function (d) {
return +d.Run;
}),
speedSumGroup = runDimension.group().reduceSum(function (d) {
return d.Speed * d.Run / 1000;
});
rowChart.width(500)
.height(200)
.margins({
top: 5,
left: 10,
right: 50,
bottom: 20
})
.dimension(runDimension)
.group(speedSumGroup)
.colors(d3.scale.category10())
.elasticX(true)
.xAxis().ticks(4);
dc.renderAll();
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)");
},
initData: function () {
var experiments = [];
experiments.push({Type: "foo", Expt: 1, Run: 1, Speed: 700});
experiments.push({Type: "foo", Expt: 1, Run: 2, Speed: 650});
experiments.push({Type: "foo", Expt: 1, Run: 3, Speed: 675});
...