Question

简短版本：我正在使用Axis Zooming和正常缩放。我将两者结合在一起，缩放工作正常。唯一的问题是，翻译不能按我的意愿运作。轴的平移不是1比1.它取决于正常缩放的比例因子，翻译的行为方式。

我的状态：我有一个线图，它具有正常的缩放。除此之外我还有Axis-Zooming。因此，如果我在Y轴区域，我只想缩放Y轴并仅移动Y轴。 X轴也是如此。

为此我使用了d3.zoom实例并在3个不同的矩形上调用（缩放）。

覆盖整个图表区域
仅覆盖x轴
仅覆盖y轴

转换保存在元素上。当触发时，缩放功能将所有3种不同的缩放变换应用于刻度。

设置一切：

graph.zoomXY = d3.zoom()
    .scaleExtent([-10, 1000]);

graph.overlayX = graph.g//.select(".axis.x")
    .append("rect")
    .attr("fill", "rgba(255,0,0,0.5)")
    .attr("width", graph.rectWidth)
    .attr("height", 15)
    .attr("y", graph.rectHeight)
    .call(graph.zoomXY);

graph.overlayY = graph.g//.select(".axis.y")
    .append("rect")
    .attr("fill", "rgba(255,0,0,0.5)")
    .attr("width", 150)
    .attr("height", graph.rectHeight)
    .attr("x", -150)
    .call(graph.zoomXY);

//append the rectangle to capture zoom
graph.overlayRect = graph.g.append("rect")
    .attr("class", "overlay-rect")
    .attr("width", graph.rectWidth)
    .attr("height", graph.rectHeight)
    .style("fill", "none")     
    .call(graph.zoomXY)
    .on("dblclick.zoom", function() {
        resetZoom();
    } );

计算比例：

function zoomed() {

    getZoomedScales();
    updateGraph();

}

function getZoomedScales() {

    var transformX = d3.zoomTransform(graph.overlayX.node());
    var transformY = d3.zoomTransform(graph.overlayY.node());
    var transformXY = d3.zoomTransform(graph.overlayRect.node());

    graph.yScaleTemp = transformXY.rescaleY(transformY.rescaleY(graph.yScale));
    graph.xScaleTemp = transformXY.rescaleX(transformX.rescaleX(graph.xScale));

}

缩放工作正常。但轴上的平移Zoom（graph.overlayY和graph.overlayX）受应用于graph.overlayRect的缩放比例因子的影响。如果我更改订单，问题就会被翻转。轴Zoom的比例因子（graph.overlayY和graph.overlayX）混淆了zoom on graph.overlayRect的转换。

打开小提琴并在图形区域上更改缩放。然后mousedown和mousemove在其中一个轴上。重复并看看它如何改变翻译。

这是一个小提琴： https://jsfiddle.net/9j4kqq1v/

Axis Zooming - 翻译问题 - d3.js版本4 -

0 个答案: