5

d3.js では、この種の階層で .data をどのように使用しますか?

data = [{node : 1, subProperties : ["A", "B", "C"]}
       ,{node : 2, subProperties : ["D", "E", "F"]}
]

d3.select("body")
  .data(data)
  .append("g") //for the node (1 and 2)
  .???         //append a "sub"-g for the subProperties (A,B,C and D,E,F)

基本的に、一連のノードを作成し、サブ プロパティごとに、同じノードの下にグループ化された何かを追加したいと考えています。

それとも、.data は「シリアル」構造にのみ使用されますか? もしそうなら、このような階層データはどのように扱われるべきですか?

私はd3のレイアウト機能を見ていません。ツリーのような階層を「反復」する方法だけです。ありがとうございました！

4

1 に答える 1

5

最初に、おそらく svg 要素内にグループを作成したいと思うでしょう。これを行う場合、最初にメイン グループを作成し、要素ごとにサブグループを作成して、subProperties 属性をこのサブグループにバインドできます。

var svg = d3.select('#chart').append('svg')
  .attr('width', 100)
 .attr('height', 100);

var data = [
  {node : 1, subProperties : ["A", "B", "C"]},
  {node : 2, subProperties : ["D", "E", "F"]}
];

var mainGroups = svg.selectAll('g.main')
 .data(data)
 .enter()
 .append('g')
 .classed('main', true);

mainGroups.selectAll('g.sub')
 .data(function(d) { return d.subProperties; })
 .enter()
 .append('g')
 .classed('sub', true);

ここのコードでjsfiddleを書きました。よろしく。

于 2013-09-08T17:36:30.803 に答える