Ссылки 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); });

, потому что вы не устанавливая й или у для узлов в любом месте. Вы рассчитываете их на лету для узлов.

После внесения этих изменений, линии появляются/исчезают (см http://codepen.io/anon/pen/ZGyapY), но я не уверен, что это похоже на гусеничный :-) (вы добавляете строки в соответствии с последним добавил узлов)

источник

2015-06-11 14:25:52 potatopeelings

Спасибо, он работает. – Thomas

Ссылки D3js не отображаются

ответ

Смежные вопросы