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

问题在于，由于新元素在平底锅之后进入，因此旧的＆＃39;元素应用了transform属性，但新元素没有。

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

在我看来，我可以使用缩放调整的xScale重新绘制旧元素，但我不确定何时以及如何做到这一点＆＃34;在幕后＆＃34;。

或者，我可以使用旧的xScale绘制新元素，并对旧元素具有相同的变换。这看起来更加混乱，因为元素会来去匆匆而且我必须跟踪当前的变换＆＃39;。我的直觉告诉我＆＃34;太多状态＆＃34;。

Answer 1

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

我在之前的回答中与this discussion相关联，所以您现在可能已经阅读了它;如果没有，它可能是一个良好的开端，让你了解在d3中接近缩放的不同方式;它逐步分解每个方法。您目前正在使用两种方法（转换与比例）的组合，我认为这会导致跟踪问题。

d3在pan之后输入元素的问题

1 个答案: