d3.js 圈子没有出现答案

【问题标题】：d3.js circles are not appearingd3.js 圈子没有出现
【发布时间】：2013-04-07 06:07:14
【问题描述】：

我正在学习本教程

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

}

为什么什么都没有出现？

谢谢，

【问题讨论】：

有什么办法可以把你的代码放在jsFiddle上？
如果没有出现任何内容，则表示您的.enter() 选择为空。这可能是因为您的 .selectAll() 不匹配任何内容，或者因为您传入的所有数据都与现有数据匹配。你检查过那些东西吗？

标签： javascript d3.js

【解决方案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/

【讨论】：