DOM-манипуляция за пределами jquery

Question

Я использую в том же скрипте JQuery и D3.js. У меня есть элемент svg, который я изменяю с помощью D3.js. И затем, когда я делаю выбор в этом элементе с JQuery, я не вижу изменений, сделанных D3.js.

DOM в начале:

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

DOM после его модификации с D3.js:

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

И потом:

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

Я не понимаю, что здесь не так , Есть идеи ?

Answer 1

без предоставления большего объема кода, что трудно точно сказать, что является причиной вашей проблемы, однако это звучит как проблема любит в код выполнения асинхронно. Ответ Sugar Patro может работать, но, на мой взгляд, код выглядит довольно раздутым.

Вы можете использовать .call()

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

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

Этот ответ конкретизирует перехода конец еще немного. Here.

Answer 2

Попробуйте эту ссылку: http://jsfiddle.net/aK6DP/77/

Код:

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

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

Это работает отлично, в этом примере я добавляю преобразование с помощью d3 и извлечения же с JQuery.

Answer 3

попытка вшита в document.body

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