javascript - D3.js:组合缩放/画笔

Question

我目前正在 Mike Bostock 的 Brush & Zoom 工作例如，尽管我没有在 svg 上覆盖一个矩形对象，而是将它附加到我的图表上，这样我仍然可以使用鼠标悬停事件和诸如此类的东西。

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

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

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 .