Question

我目前正在使用Mike Bostock的Brush & Zoom示例，虽然没有在svg上覆盖一个矩形对象，但我将它附加到我的图表上，这样我仍然可以使用鼠标悬停事件等等。

我很难将画笔和缩放功能结合起来。两者都很好，但不记得＆＃34;他们目前的状态。例如，如果我要平移/调整画笔大小，一切都很好，但是如果我要使用鼠标/触摸板事件进行缩放，它会沿着画笔跳转并完全失去我在图表中的位置

如何让缩放到＆＃34;记住＆＃34;它在画笔视口中的位置，并且流畅地工作？

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。

D3.js：组合缩放/画笔

1 个答案: