Geek Answers Handbook

Javascript D3.js drag and drop chart from its svg element

I want to make a diagram that you cannot pull from your svg element. I am doing this at the moment jsfiddle

As you can see, you can scale and drag it freely. I want this: If you drag it, for example, to the right, and the y axis hits the edge of the screen on the left, it should stop and will no longer be dragged to the right.

It also means that you cannot drag it until it is enlarged, because it already fills the svg area.

I think I need to somehow limit my method of redrawing. At the moment it’s just

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

Probably, you need to check if, for example, the left edge of the diagram falls into the coordinate [0] [x], and then somehow stops drawing it further.

+4
source share
1 answer

To find the axis point when scaling and translating, you need to get CTM and then convert to get 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
0
source

More articles:


All Articles