0 
{
 "name": "Max",
 "value": 107,
 "children": [
  {
   "name": "Don",
   "value": 60,
   "children" [
     {"name": "CC", "value": 25},
     {"name": "Jim", "value": 35}
     ]
     },
  {
   "name": "David",
   "value": 47,
   "children": [
       {"name": "Jeff", "value": 32},
       {"name": "Buffy", "value": 15}
    ]
   }
  ]
 }

d3で最も内側の子の名前にアクセスするにはどうすればよいですか?

私はやってみました：

.text(function (d) { return d.children ? null : d.name; });

しかし、それはうまくいきませんでした....

私がする時

.text(function (d) { return d.name });

外側のループの名前だけが表示されます --> Don, David.

d3.json('flare.json', function (data) {

  var canvas = d3.select('p1')
             .append('svg')
             .attr('width', 800)
             .attr('height', 800)

  var color = d3.scale.category20c();

  var data1 = data.children;

  canvas.selectAll('text')
              .data(data1)
              .enter()
              .append('text')
                 .attr('x', function (d) { return 2; })
                 .attr('y', function (d, i) { return i * 15; })
                 .attr('fill', 'black')
                 .style('font-size', '12px')
                 .text(function (d) { return d.children ? null: d.name; })

以前持っていたデータ ↓ ↓</p> 

{
"name": "Don",
"value": 75,
"children" [
           {"name": "CC", "value": 25},
           {"name": "Jim", "value": 35}
   ]
}

データがこの単一のネストされた形式の場合、コードは完全に機能しましたが、二重のネストを行った場合は機能しなくなりました

4

1 に答える 1

2

これには再帰関数が必要です --

function getNames(d) {
    return d.children ? d.children.map(getNames) : d.name;
}

これは、子を持たない要素の名前を含むネストされたリストを返します。

于 2013-07-01T17:30:54.093 に答える