Как нарисовать простой граф, ориентированный на Силу в D3 Javascript

Question

Я следую этому руководству:>http://bl.ocks.org/mbostock/4062045, который в основном предназначен для визуализации диаграммы Force_Directed в D3 Javascript. В приведенной выше ссылке есть код и файл JSON. У меня есть два вопроса по этому поводу. Мне удалось понять код. Однако, как программа может связываться между узлами таким образом и на какой основе эти узлы связаны друг с другом? Вот код для позиции ссылки и узлов:

force.on("tick", function() { 
link.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; }); 

node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 
}); 

Мой второй вопрос: Может ли кто-нибудь, пожалуйста, помочь мне сделать очень простой и небольшой образец из двух узлов (кружки) и одно звено между этими двумя узлами, Я могу понять, как работает этот график и как этот граф будет основан на очень простом файле JSON. Ваша помощь будет очень оценена.

Answer 1

Независимо от того, связаны ли два узла или нет, данные. В частности, он содержит строки, такие как

{"source":1,"target":0,"value":1} 

которые сообщают, какие узлы (по индексу) связывать. Индексы относятся к списку узлов, также указанному в данных. Эти данные приведены в D3 в этом блоке:

var link = svg.selectAll(".link") 
    .data(graph.links) 
    .enter().append("line") 
    .attr("class", "link") 
    .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

Таким образом, для каждого элемента в graph.links, будет добавлен line. На этом этапе линия не имеет начальной или конечной точки, поэтому она не нарисована - добавляется только элемент. Затем, пока симуляция работает, начальная и конечная точки линий устанавливаются на основе текущего состояния моделирования. Это код, который у вас есть в вашем вопросе.

Следующий код будет рисовать два круга и ссылку между ними.

var svg = d3.select("body").append("svg").attr("width", 100).attr("height", 100); 
svg.append("circle").attr("cx", 10).attr("cy", 10); 
svg.append("circle").attr("cx", 90).attr("cy", 90); 
svg.append("line").attr("x1", 10).attr("y1", 10).attr("x2", 90).attr("y2", 90);