Kowalsy Kowalsy - 3 months ago 10
Javascript Question

DOM manipulation outside of jquery

I use in the same script Jquery and D3.js. I have a svg element that I modify using D3.js. And then when I make a selection on this element with Jquery I cannot see the modification made by D3.js.

DOM at beginning:

<svg>
<g id="myId"></g>
</svg>


DOM after modifying it with D3.js:

<svg>
<g id="myId" transform="translate(10, 10)"></g>
</svg>


And then:

$("#myId").attr("transform") --> return undefined.


I don't get what is wrong here. Any idea ?

Answer

Without providing more code, it's difficult to say exactly what is causing your problem however it sounds like the issue likes in your code executing asynchronously. Sugar Patro's answer may work, but the code looks quite bloaty in my opinion.

You can use .call()

selection.transition()
    .call(endAll, function () {
        console.log("All the transitions have ended!");
    });

function endAll(){
  //Perform your logic here 
  var transform = $("#myId").attr("transform");
}

This answer elaborates on transition end some more. Here.

Comments