d3.JS force layout не работает
Я только начинаю с d3.js и не может заставить простую демонстрацию работать правильно. Это трудно отладить: если есть ошибка, она часто вылетает в уменьшенном коде d3 без трассировки стека. В этом случае он вообще не выводит никаких ошибок на консоль ошибок.
Когда я запускаю этот код, все мои узлы застревают в позиции (0,0) вместо того, чтобы быть выложенными силой (). - Что случилось?
<html>
<meta charset="UTF-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
$(function() {
var svg = d3.select('#graph').append('svg').attr('width', 900).attr('height', 900)
var myNodes = [{name:'a'}, {name:'b'}, {name:'c'}]
var myLinks = [{source:myNodes[0], target:myNodes[1]}, {source:myNodes[1], target:myNodes[2]}, {source:myNodes[2], target:myNodes[0]}]
svg.append("text").text("myNodes[0].name=" + myNodes[0].name).attr('y', 50)
var force = d3.layout.force().charge(-120).linkDistance(30).size([900, 900])
var link = svg.selectAll("line")
.data(myLinks)
.enter().append("svg:line");
var node = svg.selectAll("circle")
.data(myNodes)
.enter().append("svg:circle")
.attr("r", 6)
.call(force.drag)
force.nodes(myNodes).links(myLinks).start()
});
</script>
</head>
<body>
<div id="graph"></div>
</body>
</html>
1 ответ:
Force просто обрабатывает задание атрибутов x/y на узлах и связях :
... Начальные координаты x и y, если они еще не установлены внешне в допустимое число, вычисляются путем изучения соседнего узла..
Он фактически не обрабатывает обновление соответствующих форм svg. Это обычно делается в событии tick :
Прослушивание событий тика для обновления отображаемых позиций узлов
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; }); });
Единственный другая часть, отсутствующая в вашем примере, - это установка стиля линий. По умолчанию они не имеют цвета штриха, поэтому кажутся невидимыми. Вы можете либо установить цвет непосредственно на линии, как это:
var link = svg.selectAll("line") .data(myLinks) .enter().append("svg:line") .attr('stroke', 'red') .attr('stroke-width', 2)
Или создайте для них класс CSS:
<style> .link { stroke: blue; stroke-width: 1.5px; } </style>
И помечайте их этим при создании:
var link = svg.selectAll("line") .data(myLinks) .enter().append("svg:line") .attr('class', 'link')