d3 平移后输入元素的问题

Question

我在平移时使用了变换，从几个示例中复制而来。

zoom = d3.behavior.zoom()
    .x(this.xScale)
    .scaleExtent([0.5, 2])
    .on("zoom", zoomFunction(this))
    .on("zoomend", zoomEndFunction(this));

svg = histogramContainer.append("svg")
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height)
    .call(zoom)
    .append('g')
    .attr('transform', 'translate(' + this.margin.left  + ' , ' +
            (height - this.margin.bottom) + ')');

function zoomFunction(scope) {
    return function() {
        var that = scope;

        that.xDelta = d3.event.translate[0];
        that.zoomScale = d3.event.scale;

        // some other code removed for simplicity

        svg.selectAll(".stackedBar").attr("transform", "translate(" +
                                that.xDelta + ",0)scale(" +
                                that.zoomScale + ", 1)");
    };
}

问题在于，由于新元素在 之后进入 pan 然后“旧”元素应用了 transform 属性，但新元素没有。

这会破坏未来的平移，因为旧元素将从缩放前 xScale 绘制它们的位置转换，而新元素将从缩放调整后的 xScale 转换。

在我看来，我可以使用缩放调整后的 xScale 重绘旧元素，但我不确定何时以及如何在“幕后”执行此操作。

或者，我可以使用旧的 xScale 绘制新元素，并对它们应用与旧元素相同的变换。这似乎更混乱，因为元素会来来去去，我必须跟踪“当前变换”。我的直觉告诉我“状态太多”。

Answer 1

通常，如果您将比例附加到缩放行为，则使用修改后的比例重新绘制条形，使用与最初放置条形的方式完全相同的代码，让比例完成所有工作。

我在之前的回答中链接到this discussion，所以您现在可能已经阅读了；如果没有，这可能是一个很好的开始，让您了解在 d3 中进行缩放的不同方法；它逐步分解每种方法。您目前正在使用两种方法（转换与比例）的混合，我认为这会导致跟踪问题。