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鏈接不顯示

回答

相關問題