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

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

我已经做了，这表明了我的问题。请执行以下两个步骤：

使用画笔选择下图表右端的一小块区域

单击“添加第二行”链接

这两个问题是：

上部的“焦点”图表将完全重画，而不是保持对笔刷选择的约束

第二行有不同的数据范围，我希望画笔继续选择它现有的日期范围-目前它没有实际移动，所以看起来它的日期范围已经改变

我猜，对于问题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（）

中？我被难住了。

首先，你不需要更新底部图表的刻度，即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());

---

完整的示例是。

谢谢ovvn，看起来不错！然而，这是一个稍微简化的示例-如果新行的数据来自不同的源（而不是相同的csv），因此域可能会随着每一个附加（或删除）行而更改？那么，您需要显式调用笔刷组件，即

context.select（“.x.brush”）。调用（brush）
brushed（）太棒了，非常感谢ovvn！我已经完成了一个版本，将这些更改放入
drawChart（）
函数中：