D3条形和多轴线性图表

Question

我正在制作需要叠加折线图的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'
    });

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

谢谢！

Answer 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

希望这有帮助！