D3 - 带折线图的堆叠条形图双轴

Question

我在这里有一个堆栈闪电战 - https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-4sqvwd?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

我正在使用 D3 在 Angular 中创建堆积条形图

我现在还需要在同一个图表上制作折线图。

我认为最好的方法是使用双轴。

我有第二个轴工作，但无法让线路工作。

谁能指点我的工作方向

Answer 1

line 函数（在您的情况下为 valueline）似乎没有正确定义，因为它缺少访问器函数。这是相同的docs。

我无法分叉你的代码，但这里有一个 sn-p（包含 drawLine 方法）你可以试试：

private drawLine(linedata:any){
  var that = this;
  var valueline = d3.line().x(function(d, i) { 
    return that.x1(d.date); 
   // return that.x0(d.date) + 0.5 * that.x0.bandwidth();
  }).y(function(d) { 
    return that.y1(d.value); 
  });

  this.x1.domain(this.data.map((d:any)=>{
    return d.date
  }));

  this.y1.domain(d3.extent(linedata, function(d) { 
    return d.value 
  }));

  this.lineArea.append("path")
    .data([linedata])
    .attr("class", "line").style('stroke-width', 2)
    .attr("d", valueline);
}

它有效，我还为 x 属性添加了一条注释行，它与您偏移条形的方式相匹配。另一个建议是使用相同的x0 比例，因为新定义的x1 与x0 具有相同的域。希望这会有所帮助。