Question

我有一个演示here

我有一个响应式折线图，其中包含来自一个数据源的多条线。

这些线在每个数据点上都有一个圆。

调整页面大小后，我想重新绘制图形以更改宽度。

圆圈在起作用，但我无法获得相同的数据。

我正在创建实际路径，但似乎无法添加数据来画线。

const dataLine = d3.line()
  .x((d) => this.x(d.date) + 0.5 * this.x.bandwidth())
  .y((d) => this.y(d.value));

let lines = this.chart.append('g')
  .classed('lines', true)

lines.selectAll('.line-group')
  .data(data).enter()
  .append('g')
  .classed('line-group', true)

let linesUpdate = d3.selectAll('.line-group').selectAll("path") 
  .data(d => d.values)

linesUpdate.enter()  
  .append('path')
  .classed('line', true) 
  .merge(linesUpdate)
  .attr("d", dataLine);

如何添加数据以绘制线条

Answer 1

D3的数据绑定过程的这一部分可能有点违反直觉：您必须为data()方法返回一个数组，这是肯定的...但是随后数据数组中的每个对象将被视为一个单独的对象数据！这就是为什么看不到路径的原因，因为您实际上是在该组中添加了十几条路径。

解决方案只是将数组包装在另一个数组中。所以把这个...

data(d => d.values)

...进入此：

data(d => [d.values])

这样，每个数组将被视为一个单独的数据点。然后，该数据点实际上是对象的数组，被传递给线生成器。

这是您的更新代码：https://stackblitz.com/edit/multiline-responsive-xbtqzc-fldp7c?file=src/app/bar-chart.ts

多折线图，无法获取折线数据

1 个答案: