D3 - 带画笔的可调整大小的图表

Question

我已经根据 MB's example 创建了一个带有画笔选择的时间序列图表，但是我正在尝试使我的图表可调整大小。

我需要画笔选择在调整大小之间保持不变，以便 "focus" 图表在调整大小事件前后显示相同的数据范围。

我认为我需要保存选择（如 t1、t2），然后在调整所有元素的大小后重新应用它，但我不确定实现此目的的最佳方法。

我已阅读 the documentation，但找不到任何关于编程 getting/setting 从 t 值中进行选择的建议。

我收集到 brush.move 的电话是必要的：

  context.select("g.brush")
    .call(brush)
    .call(brush.move, x.range());

但我不确定如何修改它以重新获得之前的选择。

如果它有帮助，我创建了一个 fiddle 可以正常工作，除了每次调整大小都会重置的画笔选择。

Answer 1

首先，调整大小——记录宽度变化的比例：

  var widthBefore = width;
  width = svgWidth - margin.left - margin.right;

然后，确定当前笔刷选择

  var brushSelection = null;
  var brushNode = context.select("g.brush").node();
  if (brushNode)
    brushSelection = d3.brushSelection(brushNode);

根据变化比例修改选择

  if (brushSelection) {
    brushSelection = brushSelection.map(function(x) {
      return x * (width / widthBefore);
    });
  }

如果没有选择，回退到有效的东西

  else
    brushSelection = x.range();

然后将其应用到画笔上

  context.select("g.brush")
    .call(brush)
    .call(brush.move, brushSelection);

D3 - resizable chart with brush