Question

我试图用D3js显示动态，除链接外一切正常。有人能给我一些我做错的线索吗？

代码创建了一个圆形的无限毛毛虫，我试图添加一些动态来来去去的链接。代码添加节点和链接，直到数组已达到25个项目。然后每次添加新项目时删除第一个项目。

＆＃13;

//window
var vv = window,
    w = vv.innerWidth,
    h = vv.innerHeight;
 
//canevas selection
var svg = d3.select("#animviz")
		    .append("svg")
		    .attr("width", w)
		    .attr("height", h);
 
//link and node class creation
svg.append("g").attr("class", "links");
svg.append("g").attr("class", "nodes");
 
//containers de noeuds et liens
var nodes = [{id:0}], links = [];
var iter = 1;

//repeat an action every "interval"
var interval = 0.1;
setInterval(function() {
	addData();
	update();
}, interval*1000);


function addData() {
	var n = iter;
	iter++;
	nodes.push({id: n});

	if(n > 25 ){
		links.push({source: nodes[n%25], target: nodes[n%25+1]});
	}
	if (n > 25) {
		nodes.splice(0, 1);
		links.splice(0, 1);
	}
}

var node = svg.select(".nodes").selectAll(".node"),
	link = svg.select(".links").selectAll(".link");


function update() {
	link = link.data(links, function(d) { return d});
	link.enter()
	.append("line")
	.attr("class", "link")
	.attr("stroke", "#ccc")
	.attr("stroke-width", 2)
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });
	link.exit().remove();
	

	node = node.data(nodes, function(d) { return d.id; });
	node.enter()
	.append("svg:circle")
	.attr("class", "node");
	node.attr("cx", function(d) { return 200 + 100 * Math.sin(d.id); })
    .attr("cy", function(d) { return 200 + 100 * Math.cos(d.id); })
    .attr("r", 4.5)
    .attr("fill", "steelblue")
    .attr("stroke", "black");
    node.exit().remove();	
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Animal #1</title>
        <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="animviz"></div>
        <div id="printzone"></div>
        <script src="circular.js"></script>
    </body>
</html>

＆＃13;

谢谢！节点和链接

Answer 1

您当前的代码中需要进行2次更正才能显示行。

您从一开始就拼接链接，只需检查节点长度即可。考虑到只有在节点达到25时才开始添加链接，您不允许链接数组增长。将拼接移动到自己的块

  if (links.length > 2) {
     links.splice(0, 1);
  }

属性部分必须是

.attr("x1", function(d) { return 200 + 100 * Math.sin(d.source.id); })
.attr("y1", function(d) { return 200 + 100 * Math.cos(d.source.id); })
.attr("x2", function(d) { return 200 + 100 * Math.sin(d.target.id); })
.attr("y2", function(d) { return 200 + 100 * Math.cos(d.target.id); });

因为您没有为任何地方的节点设置x或y。您正在为节点点计算它们。

完成这些更改后，线条显示/消失（请参阅http://codepen.io/anon/pen/ZGyapY），但我不确定它看起来像毛毛虫:-)（您按照上一个添加线条添加了节点）

D3js链接未显示

1 个答案: