javascript - 如何在 dc.js barChart 中绘制增长率线？

Question

我有印度的州级、部门级(农业、制造业、采矿业等)和年度 GDP 数据。我创建了一个仪表板，可以在 India GDP 找到.现在在条形图中我想画一条线来表示每年的增长率。我认为这可以通过复合图表来完成，但我不知道每次应用过滤器时如何计算动态增长率。任何人都可以提供指导。

Answer 1

你是对的，应该有一个标准的方法来做到这一点。问题在于它不适合 dc.js 通过交叉过滤器处理数据的方式，并且您可能希望在图表上叠加任意数量的图形对象。

所以，现在我们有 renderlets。

使用 renderlet 的想法是编写一个函数，该函数在图表呈现后放入较低级别的 d3 代码。您可能会四处搜索您想要的确切 d3 代码，但这里有一些东西会在条形图的顶部添加一条红线:

.on('renderlet', function(chart) {
    var extra_data = [{x: chart.x().range()[0], y: chart.y()(10)}, 
                      {x: chart.x().range()[1], y: chart.y()(70)}];
    var line = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate('linear');
    var path = chart.select('g.chart-body').selectAll('path.extra').data([extra_data]);
    path.enter().append('path').attr('class', 'extra').attr('stroke', 'red');
    path.attr('d', line);
});

这从左侧到右侧绘制线，从 Y 值 10 到 Y 值 70，使用 x 和 y 比例尺获取 SVG 坐标。

我创建了一个 bar with extra line示例。

希望这能让您入门!