必要に応じてコンテンツが追加/削除される、より動的なページを構築しようとしています。これを行うには、子div
を既存のものに動的に追加しdiv
、そこにコンテンツを配置します。コンテンツを削除する必要がある場合は、 child を削除するだけdiv
です。
これは、d3.js と具体的には.enter()
メソッドを除いて、すべてに対してうまく機能します。メソッドを使用しない場合は.enter()
すべて正常に動作しますが、使用すると.enter()
突然 2 つの問題が発生します。
- 最初のデータ ポイントが削除されます。つまり、出力には表示されません。
- このメソッドは、動的に作成された要素ではなく、要素の終了タグの後に - so に
.append()
残りのデータ ポイントを追加します。HTML
body
これが d3 および動的に作成された div で動作するようにするための原因または解決策は何でしょうか?
http://jsfiddle.net/TJNCK/1/から
var area = document.querySelector("#reportArea");
area.innerHTML = "";
var reportPlacement = document.createElement("div");
reportPlacement.id = "reportPlace";
area.appendChild(reportPlacement);
var report = d3.select("#reportPlace");
report.data([1, 2, 3])
.enter()
.append("div")
.text(String);