[英]d3.js circles are not appearing
我正在完成本教程
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();
}
为什么没有出现?
谢谢,
在您的代码中不起作用的第一件事是您不创建一个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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.