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

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