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

为什么什么也没有出现？

谢谢，

- praks5432

---

你能把你的代码放在jsFiddle上吗？ - summea

如果没有任何内容出现，这意味着你的 .enter() 选择为空。这可能是因为你的 .selectAll() 没有匹配到任何内容，或者是因为你传入的所有数据都与现有数据匹配。你检查过这些事情了吗？ - Lars Kotthoff

Answer 1

你的代码中有一个问题是没有创建用于绘制圆形的svg元素。 因此，你需要进行替换。

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

by

    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/

- Christopher Chiche