D3.js：结合缩放/画笔

Question

我目前正在研究 Mike Bostock 的 Brush & Zoom 示例，尽管我没有在 svg 上放置一个覆盖的 rect 对象，而是将它附加到我的图表上，这样我仍然可以使用鼠标悬停事件等。

我在结合画笔和缩放功能时遇到了很大的困难。两者都可以正常工作，但不“记住”它们的当前状态。例如，如果我要平移/调整画笔大小，缩放一切都很好，但如果我要使用鼠标/触摸板事件进行缩放，它会沿着画笔跳跃并完全失去我在图表中的位置。

如何让缩放“记住”它在画笔视口中的位置并流畅地工作？

function brushed() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;
    var selection = d3.event.selection;
    x.domain(selection.map(x2.invert, x2));
    focus.selectAll(".point")
        .attr("cx", function(d){
            var time = timeParser(d.timestamp);
            return x(time);
        })
        .attr("cy", function(d){
            return y(d.value);
        });
    focus.selectAll(".trendline")
        .attr("d", function(d){
            return line(d);
        });
    focus.selectAll(".area")
        .attr("d", function(d){
            return area(d);
        });
    focus.select(".axis.x").call(xAxis);
    svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
        .scale(width / (selection[1] - selection[0]))
        .translate(-selection[0], 0));
}

function zoomed() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
    var t = d3.event.transform;
    x.domain(t.rescaleX(x2).domain());
    focus.selectAll(".point")
        .attr("cx", function(d){
            var time = timeParser(d.timestamp);
            return x(time);
        })
        .attr("cy", function(d){
            return y(d.value);
        });
    focus.selectAll(".trendline")
        .attr("d", function(d){
            return line(d);
        });
    focus.selectAll(".area")
        .attr("d", function(d){
            return area(d);
        });
    focus.select(".axis.x").call(xAxis);
    context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}

下面是图表的外观，可以给出一种粗略的想法：

Answer 1

您已移除示例中用于缩放图表的矩形，但您并未替换其所有功能。

虽然您在其他元素（可能是您的区域图）上调用 zoom，但在此处刷屏时不会更新该缩放：

svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
    .scale(width / (selection[1] - selection[0]))
    .translate(-selection[0], 0));

您需要将缩放类分配给图表，否则这是一个空选择（或不相关元素的选择）。如果不这样做，画笔更改不会修改缩放的比例和平移，这意味着画笔然后缩放将导致“沿着画笔跳跃”，失去原来的位置。

通过该更改，您应该能够使其正常工作：example。