2013-04-07 81 views
3

我通過本教程d3.js圈沒有出現

http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

我想只得到更新節點工作的工作(我的數據略有不同)。

var updateNodes = function(nodes){ 
console.log("updateNodes Called"); 
console.log(nodes); 
var node = nodesG.selectAll("circle.node").data(nodes,function(d){ 
    return d.id; 
}); 
node.enter().append("circle").attr("class","node") 
.attr("cx",x) 
.attr("cy",y) 
.attr("r",1000) 
.style("fill","steelblue") 
.style("stroke","black") 
.style("stroke-width",1.0); 

node.exit().remove(); 

}

此不作任何圓圈出現在DOM。

nodesG被定義爲:

var nodesG = d3.selectAll("g"); 

這個功能是從

var update = function(){ 

force.nodes(data.nodes); 
updateNodes(data.nodes); 

//force.links(curLinksData); 
//updateLinks(); 


//force.start(); 

}

爲什麼沒有出現叫什麼名字?

感謝,

+1

任何你可以把你的代碼放在[jsFiddle]上的方法(http:// jsfid dle.net/)? – summea 2013-04-07 06:10:27

+0

如果沒有出現,則表示您的'.enter()'選項爲空。這可能是因爲你的'.selectAll()'不匹配任何東西,或者因爲你傳入的所有數據都與現有數據匹配。你檢查過那些東西嗎? – 2013-04-07 20:14:16

回答

4

是不是在你的代碼工作的第一件事情是,你沒有創建svg元件,其中你會得出你的圈子。 所以,你必須通過

var nodesG = d3.select('body').append('svg'); 

更換

var nodesG = d3.selectAll("g"); 

然後,你沒有定義好你的圈子中的屬性x和y。我猜這些屬性取決於每個節點的屬性xy。因此,你必須更換的情況如下:

.attr("cx", x) 
    .attr("cy", y)   

由:

.attr("cx", function(d){return d.x}) 
    .attr("cy", function(d){return d.y}) 
  • 最後,你必須在你的腳本

這裏結束調用update()是一個工作的jsfiddle :http://jsfiddle.net/chrisJamesC/S6rgv/