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

Question

I want to make chart, that you can not drag out of its svg element. I'm doing this at the moment like this jsfiddle

As you can see, you can zoom and drag this freely. What i want is this: If you drag it for example to the right and the y axis hits the edge of your screen on the left it should stop and not be able to be dragged anymore to the right.

Which also means, that you can't drag it around while not zoomed in, because it already fills its svg area.

I guess i have to somehow restrict my redraw method. At the moment it's just this

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

It probably has to check if for example the left edge of the chart hits coordinate [0][x] and then somehow stop drawing it any further out.

Answer 1

To know the axis point on scaling and on translation you need to get the CTM and then transform to get the real points.

    //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