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

具體來說，我我有問題

.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

使用氣泡圖時，數據必須平滑。在您鏈接的示例中，調用了一個名爲「classes」的函數，對於每個節點，該函數都將該類作爲新對象返回，並且包含該大小的value屬性。 （你上面的代碼表明你省略了這個調用）。

後來，調用函數bubble.nodes使用由類功能（其被推到一個單一的陣列）中創建的每個對象的value屬性來計算x和y（其又轉換功能內使用） 。有關包裝功能的更多信息，請參閱the d3 docs。同樣的功能nodes函數也計算稍後使用的半徑（如r）。

這就是確定氣泡圖的完整佈局的調用nodes。示例中代碼的其餘部分都是關於在由nodes函數計算的結果指定的位置構造必要的SVG元素，例如圓和文本。

因此，除非符合特定要求（例如具有value屬性），否則不能將json數據直接傳遞到bubble.nodes函數。

Here是jsfiddle.net上的一個工作示例。