私は外部からD3にロードしたSVGの要素を選択できません

Question

D3に外部SVGを読み込み、D3関数を使用して選択して操作できるようにしようとしています。私はd3.select、機能の作業のどれを使用しようとすると、しかし

d3.xml("external.svg").mimeType("image/svg+xml").get(function(error, xml) { 
    if (error) throw error; 
    document.body.appendChild(xml.documentElement);       
    }) 

：私はそれを次のコードでページにロードされ得ることができました。選択した要素をconsole.logにすると、空の配列が表示されます。

Answer 1

あなたが提供したplunkrに基づいて、イベントが正しく機能するためには、d3がsvgを読み込んだ後にイベントを追加する必要があります。 ので、これに代えて：このように

d3.xml("DCMetroMap.svg").mimeType("image/svg+xml").get(function(error, xml) { 
    if (error) throw error; 
    // load the document 
    document.body.appendChild(xml.documentElement); 

    //then add the events 
    d3.select("#K05") 
    .on("mouseover", function(d) { 
     console.log(d) // d will be null here 
     console.log('hello') 
     alert("Hi!") 

    }) 

    }) 

：あなたはこのような選択を移動する必要が

d3.xml("DCMetroMap.svg").mimeType("image/svg+xml").get(function(error, xml) { 
    if (error) throw error; 
    document.body.appendChild(xml.documentElement); 
    }) 

    // this runs before the above finishes, so d3 won't find something to select 
    d3.select("#K05") 
    .on("mouseover", function(d) { 
     console.log(d) 
     console.log('hello') 
    }) 

    console.log(d3.select("#K05")) 

つまりhttp://plnkr.co/edit/WbYyBKtzZe6MtKGbjzw9?p=preview

、あなたが何かを、あなたはそれを置く必要があります後document.body.appendChild(xml.documentElement);

これが役立ちます。がんばろう！