Question

在d3.js图表上使用画笔this example之后，我尝试使用折线图来添加或删除新行。

我已经a jsFiddle显示了我遇到的问题。执行以下两个步骤：

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

这两个问题是：

上层＆＃34;焦点＆＃34;图表重新绘制到最大程度，而不是仅限于画笔的选择。
第二行有不同的数据范围，我希望画笔继续选择其现有的日期范围 - 此时它没有实际移动，所以看起来它的日期范围已经改变。

我猜测，对于问题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。

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

1 个答案: