在 d3.js 中，更新主图表以反映添加/删除线条时的画笔状态

Question

在this example 在 d3.js 图表上使用画笔之后，我正在尝试对可以添加或删除新线条的折线图进行类似操作。

我制作了a jsFiddle，它显示了我遇到的问题。执行以下两个步骤：

1. 使用画笔选择下方图表右端的一小块区域。
2. 点击“添加第二行”链接。

这两个问题是：

1. 上方的“焦点”图表将重绘至其全部范围，而不是继续受限于画笔的选择。
2. 第二行包含不同的数据范围，我希望画笔继续选择其现有的日期范围 - 目前它没有实际移动，因此看起来它的日期范围已更改。

我猜，对于问题 1，我需要更改 brushed() 函数中的某些内容？

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.selectAll("path.line").attr("d", focusLine);
  focus.select(".x.axis").call(xAxis);
}

或者，也许在renderBrush()？还是renderLines()？我被难住了。

Answer 1

首先，您不需要更新底部图表比例，即 x2 和 y2。此外，由于您在阅读 csv 后最初知道日期域，因此您不需要更新它。因此，在获取数据后，您应该立即执行以下操作：

// Get min and max of all dates for all the lines.
x.domain([
  d3.min(csvdata, function(d) {
    return d.date;

  }),
  d3.max(csvdata, function(d) {
    return d.date;
  })
]);

// Get 0 and max of all prices for all the lines.
y.domain([
  0,
  d3.max(csvdata, function(d) {
    return d.price;     
  })
]);

x2.domain(x.domain());
y2.domain(y.domain());

完整的例子是here。