2

D3.jsを使用して複数のsvg要素を作成しようとする際に、このデータ形式で機能する次のコードを使用しています。

// Data that works:
    var data= [
        {x:1, y:2, z:5}, 
        {x:3, y:5, z:10}, 
        {x:8, y:9, z:11}
    ]

// Make svg elements
    var svg = d3.select('body').selectAll('svg')
              .data(data)
              .enter().append('svg')
              .style('display', 'inline-block')
              .style('width', width)
              .style('height', height)
              .append('svg:svg')

ただし、データがネストされている場合、svg要素はDOMに表示されません。

var data = {
    x: {
        val1: 10,
        val2: 20
       },
    y: {
        val1: 15,
        val2: 14
       },
   z: {
        val1: 10,
        val2: 20
       }
}

データの各子オブジェクト（x、y、z）に対応するsvg要素を作成したいと思います。データの最初の表現では、オブジェクトごとに自動的に作成されるようです。2番目のデータ構造を前提としてこれをどのように達成できますか？

4

1 に答える 1

2

この.data()関数は通常の配列を想定しているため、オブジェクト/連想配列だけでは機能しません。d3.entriesfunctionを見てください。これは、通常の配列に変換します。

于 2012-05-30T20:35:28.857 に答える