DOM manipulation outside of jquery

Question

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 ?

Have you tried only $("#myId") in console or $("body #myId") etc. — mr., Aug 26 '16 at 10:04
This could be an asynchronous issue. jQuery may be calling the DOM before D3 has finished rendering. — IronAces, Aug 26 '16 at 10:05
Works on JSFiddle : https://jsfiddle.net/thatOneGuy/4d0k1spv/ @DanielShillcocks answer is probably correct :) — thatOneGuy, Aug 26 '16 at 10:09
I agree with @DanielShillcock here is a working example no issues http://plnkr.co/edit/sRphO5jv0VkFSlxTU9kg?p=preview — Cyril Cherian, Aug 26 '16 at 10:09
Perhaps use a callback, as shown here: http://stackoverflow.com/questions/10692100/invoke-a-callback-at-the-end-of-a-transition — IronAces, Aug 26 '16 at 10:24

score 1 · Answer 1 · answered Aug 26 '16 at 10:14

1

try enclosing within document.body

$(document.body).ready(function() {
    $("#myId").attr("transform")
});

answered Aug 26 '16 at 10:14

bibliophilsagar

1,713
1
19
40

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

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.

edited May 23 '17 at 10:29

Community

1
1

answered Aug 26 '16 at 10:56

IronAces

1,857
1
27
36

Thanks, It was indeed an asynchronous issue. – Ali Baba Aug 26 '16 at 11:10

score -1 · Answer 3 · edited Aug 26 '16 at 11:54

-1

Try this link: http://jsfiddle.net/aK6DP/77/

Code:

d3.select("#myId").attr("transform","translate(10, 10)")

alert($("#myId").attr("transform"));

It's working fine, in this example I am adding the transform using d3 and fetching the same with JQuery.

edited Aug 26 '16 at 11:54

Ahmad

5,551
8
41
57

answered Aug 26 '16 at 10:10

Devendra Soni

1,924
12
16

DOM manipulation outside of jquery

3 Answers3