Question

现在我的程序中有拖动功能和缩放功能。

最好在这个minimal test case.中说明问题。首先启动缩放时，您可能会注意到图中的点将转换得很好。但是，如果在开始缩放之前拖动一个点，那么该点通常会超出图形的范围。

这个问题似乎正在发生，因为我的坐标是在以左上角为中心的缩放空间中定义的。但是，在拖动对象后，其坐标将切换到以其原始坐标为中心的像素空间。当发生缩放时，它会将像素坐标视为相对于左上角的缩放空间坐标，这会导致问题。

我会很感激任何提示或指示，并提前感谢

拖动功能：

function dragmove(d) {

    var barz = document.querySelector("#visual");

    var point = d3.mouse(barz),
        tempP = {
            x: point[0],
            y: point[1]
        };

    if (this.nodeName === "circle") {

        d3.event.sourceEvent.stopPropagation();

        var useZoom = $('#zoom').is(":checked");
        if (useZoom == false) {


            d.usePixels = 1;
            d3.select(this).attr("transform", "translate(" + (d.x = tempP.x - xRange(d.initx)) + "," + (d.y = tempP.y - yRange(d.inity)) + ")");

            //events to update line to fit dots
            updateXs();
            redoLine();

            updateBars(canvas);
        }
    }     }

缩放功能：

 function zoomOut() {
    //update axis
    yRange.domain([d3.min(lineData, function (d) {
        return d.y - 10;
    }), d3.max(lineData, function (d) {
        return d.y + 10;
    })])

    yAxisGroup.transition().call(yAxis);

    xAxisGroup.transition().attr("transform", "translate(0," + yRange(0) + ")");

    //update line
    d3.select(".myLine").transition()
        .attr("d", lineFunc(lineData));

    var c = vis.selectAll("circle")
    c.transition()
        .attr(circleAttrs)
}

如何修复d3中拖动时发生的坐标类型更改？

0 个答案: