D3js链接不显示

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图显示一些动态的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>

谢谢！节点和链接

回答：

在当前代码中需要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链接不显示 的全部内容， 来源链接： utcz.com/qa/262270.html

回到顶部