javascript - d3.js でデータのバインドが機能しない

Question

.enter メソッドを使用して html を生成しようとしています。

次のコードがあります。

alert(d3.select(".ul_class").length);
d3.select(".ul_class").data([4, 8, 15]).enter().append("li").text("hello");

最初のアラートには「1」が表示されるため、オブジェクトは正しく選択されています。2 行目は、DOM オブジェクト内に "li" 要素を追加しません。

私は何を間違っていますか？ありがとう

score 8 · Accepted Answer

li最初に要素の（空の）選択を作成する必要があります。

d3.select(".ul_class")
  .selectAll('li') // <--
  .data([4, 8, 15]).enter().append("li").text("hello");

次に、データをその空の選択範囲にバインドします。これにより、新しいデータの選択範囲にプレースホルダーが生成されます。

だからあなたは基本的に言っています：

「すべてのli要素を選択し[4, 8, 15]、それらにデータをバインドします。まだバインドされていないすべてのデータ項目について、新しいli要素を作成します。」

1 に答える 1