D3.js樹圖佈局

我目前正在對擴大此處提供的說唱例如D3：D3.js樹圖佈局

通過樹形圖的圖表。我不想進入細節，如果不neseccary。當我嘗試在我的結構上運行樹圖佈局時，會發生特定的問題。這個結構包含一個'Treemap'作爲一個根，'child'數組包含了所有類型爲'ChartItem'的根的直接子元素。那些也包含兒童。每個chartitem都包含一個數值'value'。

我希望這不是太困難.. 重點是，我不知道什麼是不同的樹形圖屬性。下面的配置是唯一一個「作品」，可見我只是附着在根的孩子（樹圖 - >本）

我會承擔，我並不需要，因爲.value的屬性我的節點已經包含一個'值'是錯誤的？
相同的「孩子」和「節點」屬性

我不知道如何設置這些屬性。我知道D3樹形圖的例子和API參考，但他們對我沒有任何幫助..

var treemap = d3.layout.treemap() 
.size([500,300]) 
.padding(4) 
.children(function(d) { return d }) 
.value(function(d){return d.value}) 
.nodes(this.children); 



    var selection = this._layer.selectAll("g.item") 

    var color = d3.scale.category20c(); 
    console.log(this); 
    console.log(treemap); 

    var cells = selection 
    .data(treemap) 
    .enter() 
    .append("svg:g") 
    .attr("class", "item") 
    .append("rect") 
    .attr("x", function(d){return d.x;}) 
    .attr("y", function(d){return d.y;}) 
    .attr("width", function(d){return d.dx;}) 
    .attr("height", function(d){return d.dy;}) 
    .attr("fill", function(d){return color(d.parent) }) 
    .attr("stroke", "black") 
    .attr("stroke-width",1); 

    var textfields = selection 
    .append("svg:text") 
    .attr("opacity", 1.0) 
    .attr("x", function(d){return d.x;}) 
    .attr("y", function(d){return d.y+20;}) 
    //.text(function(d){return d.children ? null : d._text;}); 
    .text(function(d){return d._text;});

我希望得到任何幫助，特別是一些解釋樹圖佈局是如何被使用的

先謝謝你。

來源

2013-09-26 rre030

你有你的Treemap對象，你可以與我們分享？結構。 – cbayram

的.nodes(root)和.links(nodes)用於獲取節點和鏈路的陣列/列表具體。

通常你想給你的主/根數據對象或您的樹的節點功能的子節點，並利用從中提取的節點傳遞給鏈接函數來確定節點和感興趣的鏈接。

您提到的後者函數.children(childrenAccessorFunction)和.value(valueAccessorFunction)告訴d3的樹形圖佈局如何訪問數據結構中節點的子節點以及如何分別訪問數據結構中節點的值。如果未指定，則d3將使用node.children獲取節點的子節點數組和node.value以獲取節點的值。考慮下面我剛纔所說的例子：

var family= { 
    "name": "Fred", 
    "age": 81, 
    "kids": [ 
    { 
     "name": "Becky", 
     "age": 51, 
     "kids": [ 
     {"name": "John", "age": 15}, 
     {"name": "Jill", "age": 11} 
     ] 
    } 
    ] 
} 

var treemap = d3.layout.treemap() 
    .children(function(d) { return d.kids}) // instructs the algorithm to find children by looking for node.kids instead of the default node.children 
    .value(function(d) { return d.age; }) // similarly, value of the nodes is the age attribute of the node 

// now whenever treemap has gone through and set up your structure, you can call 
var persons = treemap.node(family) // to get all the people in the family (flat structure) 
// each person object will have (after d3 enriches it) 
// * parent - the parent node, or null for the root. 
// * children - the array of child nodes, or null for leaf nodes. 
// * value - the node value, as returned by the value accessor. 
// * depth - the depth of the node, starting at 0 for the root. 
// * x - the minimum x-coordinate of the node position. 
// * y - the minimum y-coordinate of the node position. 
// * dx - the x-extent of the node position. 
// * dy - the y-extent of the node position. 

var relationship = treemap.links(persons) // this will give you the link nodes which will be objects with the following attributes 
// * source - the parent node (as described above). 
// * target - the child node.

希望這樣做更有意義。

來源

2013-09-26 15:39:47 cbayram

D3.js樹圖佈局

回答

相關問題