d3.js圈子沒有出現

Question

我正在完成本教程

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();

}

為什么沒有出現？

謝謝，

Answer 1

在您的代碼中不起作用的第一件事是您不創建一個svg元素，您將在其中繪制圓圈。 所以你必須更換

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

通過

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

然后，您沒有很好地定義圓圈的屬性x和y。 我想這些屬性取決於每個節點的屬性x和y 。 因此，您必須替換以下內容：

    .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/