6

私は D3 を初めて使用し、正確なサンプル データを使用しない限り、バブル チャートで非常に苦労しています。

特に困っているのは

.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 であるというエラーが発生します。泡の例のサンプル データを考えると、泡の例で dx と dy がどのように作成されているかわかりません。

誰かがこれを詳細に説明してもらえますか?

4

1 に答える 1

11

バブル チャートを使用する場合、データを平坦化する必要があります。valueリンクした例では、すべてのノードに対して、サイズを含むプロパティを持つ新しいオブジェクトとしてクラスを返す「classes」という関数への呼び出しがあります。(上記のコードは、この呼び出しを省略したことを示唆しています)。

後で関数を呼び出すと、クラス関数によって作成された各オブジェクトbubble.nodesのvalueプロパティ (単一の配列にプッシュされたもの) を使用して、x と y が計算されます (変換関数内で使用されます)。pack 関数の詳細については、d3 ドキュメントを参照してください。この同じ関数は、後で使用されるnodes半径 (として) も計算します。r

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

valueそのため、特定の要件 (プロパティを持つなど) を満たさない限り、json データを直接 bubble.nodes 関数に渡すことはできません。

これは jsfiddle.net の実際の例です。

于 2012-08-28T12:28:42.963 に答える