Javascript D3多轴条形图和线形图

我正在做一个D3条形图，它需要一个叠加的折线图。我很难把折线图画出来

最终图表应如下所示：

这里是正在进行的JSFIDLE工作。

这是我遇到问题的折线图的代码。只是不知道该怎么做

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'
    });

非常感谢您为使折线图如图所示显示所提供的任何帮助

---

谢谢

首先，您需要创建一个line函数：

 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'
    });

工作代码

---

希望这有帮助

除非你这样做是为了练习/检查，否则我真的建议你使用类似c3.js（基于d3）的东西来绘制图表-如果你将组合图表和其他y轴示例结合在一起，那么工作就完成了->非常棒的Cyril。谢谢