D3js链接不显示

我试图显示一些动态的D3js，并且除链接以外的所有内容都正常工作。有人能给我一些我做错的线索吗？D3js链接不显示

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

//window 
 
var vv = window, 
 
    w = vv.innerWidth, 
 
    h = vv.innerHeight; 
 
    
 
//canevas selection 
 
var svg = d3.select("#animviz") 
 
\t \t  .append("svg") 
 
\t \t  .attr("width", w) 
 
\t \t  .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() { 
 
\t addData(); 
 
\t update(); 
 
}, interval*1000); 
 

 

 
function addData() { 
 
\t var n = iter; 
 
\t iter++; 
 
\t nodes.push({id: n}); 
 

 
\t if(n > 25){ 
 
\t \t links.push({source: nodes[n%25], target: nodes[n%25+1]}); 
 
\t } 
 
\t if (n > 25) { 
 
\t \t nodes.splice(0, 1); 
 
\t \t links.splice(0, 1); 
 
\t } 
 
} 
 

 
var node = svg.select(".nodes").selectAll(".node"), 
 
\t link = svg.select(".links").selectAll(".link"); 
 

 

 
function update() { 
 
\t link = link.data(links, function(d) { return d}); 
 
\t link.enter() 
 
\t .append("line") 
 
\t .attr("class", "link") 
 
\t .attr("stroke", "#ccc") 
 
\t .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; }); 
 
\t link.exit().remove(); 
 
\t 
 

 
\t node = node.data(nodes, function(d) { return d.id; }); 
 
\t node.enter() 
 
\t .append("svg:circle") 
 
\t .attr("class", "node"); 
 
\t 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(); \t 
 
}

<!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>

谢谢！节点和链接

来源

2015-06-11 Thomas

它看起来也许你需要为链接添加x1，x2，y1，y2属性？ –

编辑，对不起，如果我犯了一个错误，我试图学习。它也不起作用。 – Thomas

在当前代码中需要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），但我不知道它看起来像一个毛毛虫:-)（您要添加的行按最后添加节点）

来源

2015-06-11 14:25:52 potatopeelings

谢谢，它的工作原理。 – Thomas

D3js链接不显示

回答

相关问题