Untitled

%%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});
        });
    });
});