D3を使用してそのコンテナを作成せずにD3の既存のSVGコンテナを選択するにはどうすればよいですか？

これは何よりも自分の好奇心を満たすための質問です。私はどのようにd3を使用してHTMLドキュメントの本体に既に存在するSVG要素を選択するのだろうかと思っています。私は以下のスニペットがうまくいくと期待しています。それはそうではありません。それは私にかなりの不満をもたらしています。D3を使用してそのコンテナを作成せずにD3の既存のSVGコンテナを選択するにはどうすればよいですか？

<html lang="en"> 
 

 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"> 
 
    </script> 
 
    <script type="text/javascript"> 
 

 
     // If the below is changed to append instead of select it works 
 
     // but what if I don't want to create the SVG using d3 
 
     var svg = d3.select("body").select("svg") 
 

 

 
     var circle = svg.append("circle") 
 
      .attr("cx", 50) 
 
      .attr("cy", 50) 
 
      .attr("r", 20) 
 

 
    </script> 
 
    <style> 
 

 

 

 
    </style> 
 

 

 
    </head> 
 

 

 
    <body> 
 

 
    <svg> 
 
    </svg> 
 

 
    </body> 
 

 

 
</html>

出典

2017-10-27 Omnomnious

だから、これは古典的なJavaScriptの問題です。ページ要素の読み込みが完了していないため、動作していませんでした。この修正は、d3コードを先頭から最後のbodyタグの直前に移動することです。

<html lang="en"> 
 

 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"> 
 
    </script> 
 

 
    <style> 
 

 

 

 
    </style> 
 

 

 
    </head> 
 

 

 
    <body> 
 

 
    <svg> 
 
    </svg> 
 

 
    <script type="text/javascript"> 
 

 
     // If the below is changed to append instead of select it works 
 
     // but what if I don't want to create the SVG using d3 
 
     var svg = d3.select("body").select("svg"); 
 

 

 
     var circle = svg.append("circle") 
 
      .attr("cx", 50) 
 
      .attr("cy", 50) 
 
      .attr("r", 20) 
 
      .style("color", "green"); 
 

 
    </script> 
 

 
    </body> 
 

 

 
</html>

出典

2017-10-27 21:13:12

ああ、それはかなり変だ！それを最後に置くことは、前のすべての要素の後にロードすることを保証しますか？また、この代わりにjavascriptをロードする前に、代わりに他のソリューションがありますか？ – Omnomnious

ほとんどの場合、はい。そして、ええ、いくつかの人々は同じコードをJquery $（document）.ready（）に埋め込みます。ステートメント。その場合、Jqueryは読み込みを待機します。 bodyタグのonloadイベントを使用して、同じコードで関数を呼び出すこともできると思います。しかし、私はそれをやったから、何年も経っています。 –

、絶対に確認してくださいあなたはいつ、どこで、ページに関連して、あなたのスクリプトを挿入するより多くの柔軟性を持っている。この時点で

document.addEventListener('DOMContentLoaded', function(){ 
    init(); 
}) 

function init(){ 
    var svg = d3.select("svg"); 

    var circle = svg.append("circle") 
     .attr("cx", 50) 
     .attr("cy", 50) 
     .attr("r", 20) 
     .style("color", "green"); 
}

ようDOMContentLoadedを聞くにはターゲット要素と同様に

出典

2017-10-28 01:07:31 datafunk

D3を使用してそのコンテナを作成せずにD3の既存のSVGコンテナを選択するにはどうすればよいですか？

答えて

関連する問題