Question

我对d3很新，所以目标＃1是显示图表。这适用于以下代码：

const line = d3.line()
  .x(d => this.x(d.x))
  .y(d => this.y(d.y));

console.log('data', JSON.stringify(data), 'color', color);
// data [{"x":"2017-07-01T04:00:00.000Z","y":81.2},{"x":"2017-08-01T04:00:00.000Z","y":79.6},{"x":"2017-09-01T04:00:00.000Z","y":79.4},{"x":"2017-10-01T04:00:00.000Z","y":80.6},{"x":"2017-11-01T04:00:00.000Z","y":80},{"x":"2017-12-01T05:00:00.000Z","y":76}] color blue
g.append('path')
  .datum(data)
  .attr('class', 'line')
  .attr('stroke', color)
  .attr('d', line);

使用此代码，无论何时我再次运行此方法，我都会得到一个新行，这是我追加的预期。我希望在拥有新数据和/或颜色时仅更新stroke和d属性，我将console.log后面的代码替换为：

const lines = g.selectAll('.line').data(data);
lines.enter()
  .append('path')
  .attr('class', 'line');
lines
  .attr('stroke', color)
  .attr('d', line);

我不再看到这条线，而不是一开始，而不是在更新后。

我在这个问题中包含了代码的代码：https://codepen.io/anon/pen/BJaVNM?editors=0010

再次感谢您的帮助！

Answer 1

正确的数据连接将是：

  // give data an array, each part of the array is an array representing a line (ie path)
  let lines = g.selectAll('.line').data([data]); //<-- notice array

  // you have lines entering, .merge this back to the update selection
  lines = lines.enter()
    .append('path')
    .attr('class', 'line')
    .merge(lines);

  // lines variable is now enter + update
  lines
    .attr('stroke', color)
    .attr('d', line);

更新了codepen

数据连接在折线图中

1 个答案: