Question

我有Statewise，sectorwise（农业，制造业，采矿业等）＆amp;印度的年度GDP数据。我创建了一个可在India GDP找到的信息中心。现在在条形图中，我想绘制一条线，表明每年的增长率。我认为它可以通过复合图表完成，但我不知道每次应用过滤器时如何计算动态增长率。任何人都可以提供指导。

Answer 1

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

所以，现在我们有了renderlet。

使用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示例。

希望这会让你开始！

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

1 个答案: