D3のバブルチャート

Question

私はD3に新しいですし、私は正確なサンプルデータを使用しない限り、私はバブルチャートで、本当に苦労しています：

• https://github.com/mbostock/d3/blob/master/examples/bubble/bubble.js
• https://github.com/mbostock/d3/blob/master/examples/data/flare.json

具体的にI問題があります

.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

私はこの部分を取得することができません。他の例を扱うコードここで

は、私が働いているJSONデータのサブセットです：

{ 
"name": 301, 
"children": [ 
    { 
     "resourceid": "11", 
     "creator_uid": "301", 
     "owner": "Tom", 
     "name": "Omega", 
     "created_time": "2012-03-07 20:07:11", 
     "items": "4" 
    }, 
    { 
     "resourceid": "188", 
     "creator_uid": "301", 
     "owner": "Tom", 
     "name": "Nexus", 
     "created_time": "2012-03-31 00:04:56", 
     "items": "14" 
    } 
    ] 
} 

私は「項目」に半径を設定することが、私は、ノードを配布し

.data(bubble.nodes(json) 

を期待しますしかし、私はdxがNULLであるというエラーが出ています。バブルの例のサンプルデータを見ると、バブルの例がd.xとd.yをどのように作成しているかはわかりません。

誰かがこれを詳細に説明できますか？

Answer 1

バブルチャートを使用する場合は、データをフラット化する必要があります。リンクされた例では、 "クラス"という名前の関数が呼び出され、すべてのノードに対して、サイズを含むvalueプロパティを持つクラスが新しいオブジェクトとして返されます。 （上のコードは、この呼び出しを省略したことを示しています）。

後で、関数bubble.nodesを呼び出すと、classes関数（1つの配列にプッシュされた）によって作成された各オブジェクトのvalueプロパティが使用され、xとy（変換関数内で使用される） 。パック機能の詳細については、the d3 docsを参照してください。この同じnodes関数は、後で使用される半径（r）も計算します。

バブルチャートの完全なレイアウトを決定するのはnodesです。サンプル中のコードの残りは、nodes関数で計算された結果によって指定された位置に円やテキストなどの必要なSVG要素を構築することに関するものです。

したがって、特定の要件（たとえば、valueプロパティを持つなど）を満たしていない限り、jsonデータをbubble.nodes関数に直接渡すことはできません。

Hereはjsfiddle.netの実例です。