多轴 D3 条形图和线性图答案

【问题标题】：D3 Bar and Linear Chart With Multiple Axis多轴 D3 条形图和线性图
【发布时间】：2016-04-24 04:24:24
【问题描述】：

我正在制作需要叠加折线图的 D3 条形图。我无法让折线图覆盖它。

最终图表应如下所示：

这是一个正在进行中的 jsfiddle。 https://jsfiddle.net/t05qffo5/1/

这是我遇到问题的折线图的代码。只是不知道如何使它工作。

var line = d3.svg.line()
    .x(function(d) {return d[2];})
    .y(function(d) {return d[2];})
    .interpolate('linear');

var linePath = svg.append('path')
    .attr({
        'd': line(chartData),
        'stroke': 'yellow',
        'stroke-width': 2,
        'fill': 'none'
    });

非常感谢任何帮助让折线图显示在图像中。

谢谢！

【问题讨论】：

除非您这样做是为了练习/考试，否则我真的建议您使用 c3.js（基于 d3）之类的东西来绘制图表 - 如果您结合组合图表和其他 y 轴示例到这里工作就完成了 -> c3js.org/examples.html

标签： javascript d3.js charts bar-chart linechart

【解决方案1】：

首先你需要做一个线函数：

 var line = d3.svg.line()
              .x(function(d) {
                //so that the line is from the middle of the bar
                //here xScale.rangeBand() is the width of the bar
                return x(d) + xScale.rangeBand() + xScale.rangeBand()/2;
              })
              .y(function(d) {
                return y(d)+margin.top ;
              })
              .interpolate('linear');

接下来是你做线：

  var linePath = svg.append('path')
    .attr({
        'd': line(data),//use the above line function
        'stroke': 'red',
        'stroke-width': 2,
        'fill': 'none'
    });

工作代码here

希望这会有所帮助！

【讨论】：

很棒的西里尔。谢谢！