2

これを変換したい：

  var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

の中へ：

 <div>
   <div>apples</div><div>red</div>
 </div>
 <div>
   <div>oranges</div><div>orange</div>
 </div>
 <div>
   <div>bananas</div><div>yellow</div>
 </div>

これは簡単なはずですが、すべてのソリューションはネストされてしまいます。

 <div>Apples<div>red</div></div>

私はテーブルまたはリストの描画ソリューションに精通していますが、実際の問題では、最初のdivにテキストがあり、2番目のdivにグラフが含まれているため、機能しません。

これは、ネストを解除するための私の最新の試みでした。

var div3 = anchor.selectAll("#mydiv")
        .data(data);

div3
        .enter().append("div")
        .attr("class","one")
        .text(function(d) { return d[0];})

div3.selectAll("#mydiv .one")
        .data(function(d) {
            return [d[1]]; })
        .enter().append("div")
        .attr("class","two")
        .text(function(d) {
            return d;})

これを行う正しい方法は何ですか？

4

1 に答える 1

2

それを行う標準的な方法は次のとおりです。

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

d3.select("body").selectAll("div.outer")
    .data(data)          // data is array with length 3
  .enter().append("div") // will append 3 divs
    .attr("class", "outer")
  .selectAll("div.inner")
    .data(function(d) { return d; })
  .enter().append("div")
    .attr("class", "inner")
    .text(function(d) { return d; });​

作業フィドルを参照してください：http：//jsfiddle.net/YaAkv/

試したコードにはかなりの問題があります。私は読むことをお勧めします：

結合で考える

ネストされた選択

およびその他のチュートリアル： https ：//github.com/mbostock/d3/wiki/Tutorials

編集

異なる配列項目の意味が異なる場合は、代わりにオブジェクトを使用するのが一般的です（http://fiddle.jshell.net/YaAkv/1/）：

var data = [{ fruit: 'apples', color: 'red'}, 
            { fruit: "oranges", color: "orange"},
            { fruit: "bananas", color: "yellow"}
           ];

var diventer = d3.select("body").selectAll("div.item")
    .data(data)
  .enter().append("div")
    .attr("class", "item");

diventer.append("div")
    .attr("class", "fruit")
    .text(function(d) { return d.fruit; });

diventer.append("div")
    .attr("class", "color")
    .text(function(d) { return d.color; });

その場合、出力は次のようになります。

<div class="item">
  <div class="fruit">apples</div>
  <div class="color">red</div>
</div>
<div class="item">
  <div class="fruit">oranges</div>
  <div class="color">orange</div>
</div>
<div class="item">
  <div class="fruit">bananas</div>
  <div class="color">yellow</div>
</div>

これは、次の方法で元の2Dアレイを使用して実現することもできます（http://fiddle.jshell.net/YaAkv/2/）：

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

var diventer = d3.select("body").selectAll("div.item")
    .data(data)
  .enter().append("div")
    .attr("class", "item");

diventer.append("div")
    .attr("class", "fruit")
    .text(function(d) { return d[0]; });

diventer.append("div")
    .attr("class", "color")
    .text(function(d) { return d[1]; });

編集

選択を変数に保存しないソリューション：

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

d3.select("body").selectAll("div.item")
    .data(data)
  .enter().append("div")
    .attr("class", "item")
    .each(function(d) {
      d3.select(this).append("div")
        .attr("class", "fruit")
        .text(d[0]);

      d3.select(this).append("div")
        .attr("class", "color")
        .text(d[1]);
    });

​
于 2012-11-05T18:03:51.747 に答える