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的意思。

我无法分叉您的代码，但是您可以尝试以下代码段（包含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具有相同的域。希望这会有所帮助。

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

1 个答案: