D3.js: 结合缩放/刷选功能

Question

我目前正在使用Mike Bostock的 Brush & Zoom示例进行工作，尽管与svg上叠加的矩形对象不同，我将其附加到我的图表上，以便仍然可以使用鼠标悬停事件等。

我很难将刷和缩放功能结合起来。两者都可以正常工作，但不会“记住”它们的当前状态。例如，如果我要平移/调整刷子，则缩放一切正常，但如果我要使用鼠标/触摸板事件进行缩放，它会沿着刷子跳动，并完全失去我在图表中的位置。

如何使缩放“记住”它在刷视口中的位置，并流畅地工作？

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

这是图表的大致样子，以便提供一种粗略的想法：

- apgsov

Answer 1

您在示例中删除了用于缩放图表的矩形，但并未替换其所有功能。尽管您在其他元素（可能是您的区域图）上调用了zoom，但在此处刷选时未更新该缩放。

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

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

通过这个更改，你应该能够让它工作：example。

- Andrew Reid

---

非常感谢，简直不敢相信我没有发现这个。 - apgsov