Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-pmsptg?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

它是一个堆叠的条形图，顶部有一个双轴，一个折线图。

我不知道为什么，但是作为线数据的右轴已停止工作，仅显示0-1的值

我已经看了好几个小时了，代码看起来和我做过的其他折线图示例一样-https://stackblitz.com/edit/simple-line-chart-tbjdiw?embed=1&file=src/app/app.component.ts&hideNavigation=1

谁能看到我为打破这一点所做的事情。

Answer 1

我觉得这是个好习惯，首先在轴上附加<g>，然后在设置好域之后，将它们称为。进行了相关更改：

重新排序：

this.drawAxis();
this.createStack(this.data);

设置域后调用轴：

this.y0.domain([0, +d3.max(this.stackedSeries, function (d: any) {
   return d3.max(d, (d: any) => {
      return d[1]
   })
})]);
this.chart.select('g.y0-axis').call(d3.axisLeft(this.y0));

从键中删除“四个”，因为它在数据中不存在：
```
  .keys(['one', 'two', 'three'])
```

包括从您的previous post到该行的stroke-dasharray

var totalLength = thisLine.node().getTotalLength();

thisLine.attr("stroke-dasharray", totalLength + " " + totalLength)
   .attr("stroke-dashoffset", totalLength);

thisLine.transition()
  .duration(1000)
  .attr("stroke-dashoffset", 0);

这是经过上述更改的代码的分支： https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-vtb2zr?file=src/app/bar-chart.ts

D3-轴仅显示0-1的值

1 个答案: