D3.js 折线图中的数据连接

我对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);

有了这段代码，每当我再次运行这个方法时，我都会得到一个新行，这是因为我正在追加。当我有新数据和/或颜色时，我只想更新笔划和d属性，我将console.log后面的代码替换为：

我再也看不到这行了，一开始没有，更新后也没有

我在这个问题中包含了一个带有代码的代码笔：

---

再次感谢你的帮助

正确的数据连接应该是：

  // 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);

---

更新后的

正确的数据连接将是：

  // 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);

---

已更新

请不要误用d标签。这是用于D编程语言的。@greenify，很抱歉，我不是有意添加D标记的。我试图添加d3v4.js。谢谢你指出。请不要误用d标签。这是用于D编程语言的。@greenify，很抱歉，我不是有意添加D标记的。我试图添加d3v4.js。感谢您指出。您现在可以通过d3的选择在一次通话中完成此操作。join-查看关于我的答案您现在可以通过d3的选择在一次通话中完成此操作。join-查看关于我的答案