Graph jumps when panning after a zoom

New To Observable
1

Hi
I am new to using D3 and taking over the code developed by a colleague. We have a graph with nodes and links. It allows panning an zooming. My issue is after zoom and then pan the graph jumps/ jitters.
I tried every possible solution in stackoverflow, but cannot solve it. Appreciate any help .

draw() {
    
    //let transform = d3.zoomIdentity.translate(width / 2, height / 2);

    this.zoom = d3.zoom()
        .scaleExtent([0.2 / 1, 2]) 
        .translateExtent([[- width * 2.5, - height * 2.5], [width * 2.5, height * 2.5]]) 
        .on("start", this.handleStartZoom)
        .on("zoom", this.handleZoom)
        .on("end", this.handleEndZoom);

    this.svg = d3.select(".svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("style", "background:#FFF !important;outline:1px solid #ede9e9 !important; ")
        .on("contextmenu", function (event) {
            event.preventDefault();
        })
        .call(this.zoom);

    this.zoom.scaleTo(this.svg.transition().duration(750), 0.2); // max zoom out



    this.gsvg = this.svg.append("g");
        //.attr("transform", d3.zoomIdentity.translate(width / 2, height / 2));
        // .attr("transform",`translate(0, 0)`);





  

    

    this.gsvg.append("g")
        .attr("class", "links");

    this.gsvg.append("g")
        .attr("class", "nodes");

    this.simulation = d3.forceSimulation(graph.nodes)
        .force("charge", d3.forceManyBody().strength(-30))
        .force("center", d3.forceCenter(this.width / 2, this.height / 2))
        .force("link", d3.forceLink(graph.links).id(d => d.id))
        .on("tick", this.ticked);



handleZoom = (event, d) => {
    console.log(event)
    if (svgToggle !== true) {
        console.log(this.gsvg)
     
        this.gsvg.attr("transform", event.transform);
     
    }
    else {
        if (event.sourceEvent.type != "wheel") {
            this.chartSelection.moveSelection(d3.pointer(event, this.gsvg.node()));
        }
        else {
            this.gsvg.attr("transform", event.transform);
        }
    }

}


handleEndZoom = (event, d) => {
    zoomLevel = event.transform.k;

    if (svgToggle === true) {
        this.chartSelection.endSelection(d3.pointer(event, this.gsvg.node()));
    }

}


maxZoomOut = () => {

    this.zoom.scaleTo(this.svg.transition().duration(750), 0.2); // max zoom out

}
2

Hi @idias, were you able to solve your problem? If not, could you share a standalone example?

Your description sounds like there might be multiple event handlers trying to update the graph at the same time. Make sure that draw() is not called multiple times on the same element, or that you have some mechanism to remove event listeners before calling it again.

3

Hi @mootari
Thank you for responding
I still haven’t been able to solve my problem. Answers to similar questions in most forums suggest that there’s some issue with transform/translate. But I think I have already done what they suggest.

I will try to add an example.