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

Question

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

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

我相信我需要保存选择(如 t1、t2(，然后在调整所有元素大小后重新应用它，但我不确定实现这一目标的最佳方法。

我已经阅读了文档，找不到任何关于以编程方式从 t 值获取/设置选择的建议。

我收集了一个电话，brush.move将是必要的：

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

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

为了以防万一有帮助，我创建了一个有效的小提琴，除了每次调整大小时都会重置的画笔选择。

https://jsfiddle.net/vdqg4rsm/12/

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