複数のdivに追加するD3（データバインディングJSON）

Question

D3は比較的新しいので、データバインディングに関する質問がありました。私はangular.jsを使用していますので、私は双方向のデータバインディングに慣れています...しかし、私はD3でどのように処理されるのだろうかと思っていました。

私は自分のjsonデータのさまざまな要素を別の部門に追加しようとしています。

この例では、メンバー名は名前、タイプのタイプ、カテゴリのカテゴリです。

今後、クリックイベントをグリッドに追加する予定であったため、メンバー名をクリックすると詳しい情報が表示されます。

私は角を知っているので、ng-repeatを使用してデータを補間することができます。しかし、これがd3でどのように達成されているかはわかりません。

すべてのヘルプは、（次のコードは、私はあなたが複数の変数にラベルを付けることはできないと思います。動作しません）

:-)クールになる

<div id="container" class="AM-grid"> 

      <div class="AM-cell AM-cell-3"> 
        <h2 id="names" class="AM-members-text names"></h2> 
      </div> 
      <div class="AM-cell AM-cell-2"> 
        <h2 id="type" class="AM-members-text type"></h2> 
      </div> 
      <div class="AM-cell AM-cell-3"> 
        <h2 id="category" class="AM-members-text category"></h2> 
      </div> 
    </div> 

<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 

var boxtext = document.getElementById('textarea'); 
var jsonbox = JSON.parse(boxtext.innerHTML); 


var dataElms = d3.select('#container') 
     .data(jsonbox) 

var na = dataElms.select("#names") 
     na.data(jsonbox.member).enter().append('h2') 
      .text(function(d){ 
       return d.display 
      }); 
    </script> 

Answer 1

は考えていた...それを考え出しましたそれについて間違った方法

要素は、その後のスタイル

var dataElms = d3.select('#container').selectAll('.repeat'); 
var repeat = dataElms.selectAll('div') 
    .data(jsonbox.member) 
    .enter() 
    .append('div') 
    .classed('AM-grid members', true) 
    .on('click', function(d,i) { 
     var activeClass = "active"; 
    var alreadyIsActive = d3.select(this).classed(activeClass); 
     d3.select(this).classed(activeClass, !alreadyIsActive); 
     }) 
    .html(function(d) { 
     return "<div class='AM-cell AM-cell-3'>" + "<h2 class='AM-members-subheader'>" + d.display + "</h2></div>" + 
        "<div class='AM-cell AM-cell-3'>" + "<h2 class='AM-members-subheader'>" + d.member_type + "</h2></div>" + 
        "<div class='AM-cell AM-cell-3'>" + "<h2 class='AM-members-subheader'>" + d.category + "</h2></div>" + 
        "<div class='AM-cell AM-cell-2'>" + "<h2 class='AM-members-subheader'>" + d.hash + "</h2></div>" 
    }); 

を添付繰り返す必要