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

希望对您有所帮助！

D3 条形图和多轴线性图

D3 Bar and Linear Chart With Multiple Axis

javascript

charts

linechart

bar-chart

d3.js