%%javascript
// Загрузим библиотеку d3.js из интернета.
require.config({paths:{d3: "http://d3js.org/d3.v3.min"}});
require(["d3"], function(d3) {
// Код в данном блоке выполняется после загрузки библиотеки d3.js
// Во-первых, указываем размеры поля.
var width = 300, height = 300;
// Настраиваем цвет.
var color = d3.scale.category10();
// Создаем динамический макет ориентированного графа.
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height])
// В элементе <div> создаем графическое изображение, которое будет
//содержать интерактивную визуализацию.
var svg = d3.select("#d3-example").select("svg")
if (svg.empty()) {
svg = d3.select("#d3-example").append("svg")
.attr("width", width)
.attr("height", height);
}
// Загружаем файл JSON.
d3.json("graph.json", function(error, graph)
{
// В данном блоке файл загрузился, и объект 'graph' содержит наш
//граф.
//Загружаем узлы и ребра в ориентированный граф.
force.nodes(graph.nodes)
.links(graph.links)
.start();
// Создадим элемент <line> SVG для каждой ссылки в графе.
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
// Создадим элемент <circle> SVG для каждого узла в графе и укажем
//некоторые атрибутов.
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5) // radius
.style("fill", function(d) {
// The node color depends on the club.
return color(d.club);
})
.call(force.drag);
// Название узла – это его номер.
node.append("title")
.text(function(d) { return d.name; });
// Свяжем позиции элементов SVG к позициям динамического
//ориентированного графа на каждый момент времени.
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});
});
});
});