D3を使用してデータに基づいてサブ要素を追加する

xwhyz

私は次のhtml構造を持っています

<thead class="table-header">   
  <tr>
    <th><div class="th-inner">a</th>
    <th><div class="th-inner">b</th>
    <th><div class="th-inner">c</th>   
  </tr> 
</thead>

そして、クラスthでdivを追加したいのですが、div thのすぐ隣に、3つの要素(mydata = ['x'、 'y'、 'z'])を持つ単純なデータ配列に基づいた内部があります。

フォローしてみましたが、うまくいかないようです。

cells = d3.select('root').select('thead.table-header tr')
   .selectAll('div.th-inner').data(mydata)
   .selectAll('div.th-but').data(function(d,i){return d;});

cells.enter().append('div').classed('th-but', true);

私は何かが足りないのですか?私は解決策で正しい方向に進んでいますか?

ヒューズ

div.th-but兄弟になりたい場合div.th-innerは、親要素に追加する必要がありますthinsertこれに使用することも、親要素を直接選択することもできます

var cells = d3.select('.table-header tr')
  .selectAll('th').data(mydata)
  .selectAll('div.th-but').data(function(d) { return d; });

cells.enter()
  .append('div')
  .classed('th-but', true);

または

var cells = d3.select('.table-header tr')
  .selectAll('div.th-inner').data(mydata)
  .selectAll('div.th-but').data(function(d) { return d; });

cells.enter()
  .insert('div')
  .classed('th-but', true);

jsfiddle

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

D3:svg要素の操作に基づいてデータを変更する

分類Dev

列に基づいてd3データサブセットを選択する

分類Dev

(非表示の)JSONデータに基づいてD3.jsを使用してテーブルを作成する

分類Dev

D3はデータに基づいて色を更新します

分類Dev

複数の属性に基づいてデータを選択するd3

分類Dev

データの追加の列に基づいて、d3サンキーダイアグラムのノードの色を変更します

分類Dev

データ属性に基づいてjQueryを使用して要素を表示する方法

分類Dev

オブジェクト内のデータに基づいて棒グラフに凡例を動的に追加する方法(d3)

分類Dev

D3は、変数に基づいて画像または円要素を条件付きで追加します

分類Dev

dplyrを使用して、他のデータフレームに基づいて新しい列を追加する

分類Dev

AngularJsを使用したD3、共通のキーに基づいて異なるデータを使用した同じページ上の複数のグラフ

分類Dev

リスト内の要素に基づいてデータフレームをサブセット化する

分類Dev

D3 d3jsを使用して、要素の属性に基づいて「構成された」要素を階層的に追加するにはどうすればよいですか?

分類Dev

データ属性に基づいて要素を選択します

分類Dev

値に基づいてデータフレームを3つのサブフレームに分割します

分類Dev

For ループを使用して条件に基づいてデータを他のブックにコピーする

分類Dev

グループ基準に基づいてパンダを使用してデータフレームをサブセット化する方法は?

分類Dev

ユーザー入力データに基づいてphpを使用して動的テーブルを作成する

分類Dev

appendToを使用したデータ属性に基づいてjqueryを使用して要素を移動します

分類Dev

リストに基づいてPython3.xデータフレームをサブセット化する

分類Dev

データフレーム内の要素をループし、条件に基づいて行を追加します

分類Dev

インデックスに基づいてサブリストの要素を追加する方法-Python

分類Dev

光沢のあるRのユーザー情報に基づいてactionButtonを使用してデータフレームをサブセット化する方法

分類Dev

data.tableを使用してDateオブジェクトに基づいてデータを再形成する

分類Dev

D3で、データの値に基づいてデータ要素ごとに複数の要素を作成するにはどうすればよいですか?

分類Dev

インデックスを使用して配列要素に基づいてサウンドを再生する

分類Dev

別の要素のデータ属性に基づいて要素を非表示にする

分類Dev

D3とBootstrapを使用してすべてのデータ要素を表示するにはどうすればよいですか?

分類Dev

データを取得し、取得したデータに基づいて要素を変更するための Ajax

Related 関連記事

  1. 1

    D3:svg要素の操作に基づいてデータを変更する

  2. 2

    列に基づいてd3データサブセットを選択する

  3. 3

    (非表示の)JSONデータに基づいてD3.jsを使用してテーブルを作成する

  4. 4

    D3はデータに基づいて色を更新します

  5. 5

    複数の属性に基づいてデータを選択するd3

  6. 6

    データの追加の列に基づいて、d3サンキーダイアグラムのノードの色を変更します

  7. 7

    データ属性に基づいてjQueryを使用して要素を表示する方法

  8. 8

    オブジェクト内のデータに基づいて棒グラフに凡例を動的に追加する方法(d3)

  9. 9

    D3は、変数に基づいて画像または円要素を条件付きで追加します

  10. 10

    dplyrを使用して、他のデータフレームに基づいて新しい列を追加する

  11. 11

    AngularJsを使用したD3、共通のキーに基づいて異なるデータを使用した同じページ上の複数のグラフ

  12. 12

    リスト内の要素に基づいてデータフレームをサブセット化する

  13. 13

    D3 d3jsを使用して、要素の属性に基づいて「構成された」要素を階層的に追加するにはどうすればよいですか?

  14. 14

    データ属性に基づいて要素を選択します

  15. 15

    値に基づいてデータフレームを3つのサブフレームに分割します

  16. 16

    For ループを使用して条件に基づいてデータを他のブックにコピーする

  17. 17

    グループ基準に基づいてパンダを使用してデータフレームをサブセット化する方法は?

  18. 18

    ユーザー入力データに基づいてphpを使用して動的テーブルを作成する

  19. 19

    appendToを使用したデータ属性に基づいてjqueryを使用して要素を移動します

  20. 20

    リストに基づいてPython3.xデータフレームをサブセット化する

  21. 21

    データフレーム内の要素をループし、条件に基づいて行を追加します

  22. 22

    インデックスに基づいてサブリストの要素を追加する方法-Python

  23. 23

    光沢のあるRのユーザー情報に基づいてactionButtonを使用してデータフレームをサブセット化する方法

  24. 24

    data.tableを使用してDateオブジェクトに基づいてデータを再形成する

  25. 25

    D3で、データの値に基づいてデータ要素ごとに複数の要素を作成するにはどうすればよいですか?

  26. 26

    インデックスを使用して配列要素に基づいてサウンドを再生する

  27. 27

    別の要素のデータ属性に基づいて要素を非表示にする

  28. 28

    D3とBootstrapを使用してすべてのデータ要素を表示するにはどうすればよいですか?

  29. 29

    データを取得し、取得したデータに基づいて要素を変更するための Ajax

ホットタグ

アーカイブ