Question

我想制作图表，你不能拖出它的svg元素。我现在这样做jsfiddle

如您所见，您可以自由缩放和拖动它。我想要的是这个：如果你将它拖到例如右边，y轴击中左边屏幕的边缘，它应该停止，不能再向右拖动了。

这也意味着，你不能在没有放大的情况下拖动它，因为它已经填满了它的svg区域。

我想我必须以某种方式限制我的重绘方法。目前只是这个

function redraw() {
    plotChart.attr("transform",
        "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
};

可能必须检查例如图表的左边缘是否达到坐标[0] [x]，然后以某种方式停止将其拉出来。

Answer 1

要了解缩放和转换时的轴点，您需要获取CTM，然后转换以获得真实的点。

    //gets CTM on the first y line that is the group
    var ctm = d3.select(".x").select(".tick")[0][0].getCTM();
    //the first y line 
    var k = d3.select("svg")[0][0].createSVGPoint();
    //current point without transform
    k.x = d3.select(".x").select("line").attr("x2");
    k.y = d3.select(".x").select("line").attr("y2")

    j = k.matrixTransform(ctm)
    //j is the real point of the line post transform.
    //your code to zoom or pan depending on the value of j

Javascript D3.js将图表从其svg元素中拖出

1 个答案: