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

【问题标题】：How to draw growth rate line in dc.js barChart?如何在 dc.js barChart 中绘制增长率线？
【发布时间】：2015-05-26 11:59:08
【问题描述】：

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

【问题讨论】：

这是个好问题。我在弄清楚如何使用假组来做这件事和只是建议使用渲染组件之间左右为难。
感谢您的回复...我刚开始编码，将探索renderlet。如果您能提供有关如何使用 renderlet 完成此特定任务的任何指导，我将不胜感激。另外，我确实认为这个特性应该是 dc.js 中的标准，它是业务分析中非常常用的图表。

标签： javascript d3.js visualization dc.js crossfilter

【解决方案1】：

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

所以，现在我们有渲染器。

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

希望这能让你开始！

【讨论】：

有没有办法给这条线一个标签/文本/标题，沿着这条线的长度流动，例如global average ?
嗨@coding_idiot，当然；我已将其添加到上面链接的示例中。