Untitled
unknown
plain_text
3 years ago
2.8 kB
3
Indexable
Never
%%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}); }); }); });