Разбивочная сила направленная разметка после ТИКа с использованием корневого узла (возврат к центру)
Я экспериментирую с силовым распределением, используя D3.JS. Что мне нужно, так это центрировать макет по корню (или другому выбранному узлу) и возвращать этот узел в центр svg (например, canvas) после выполнения функции тика (Альфа графика низкая). Возможно ли это? Я нашел пример в
Но я не могу заставить корень (при использовании aplha или другого пользовательского вычисления функции тика) вернуться обратно в центр (центрировать макет этим конкретный узел).
Любая помощь будет признательна.
2 ответа:
На самом деле я решил это так(аналогично предыдущему, но более сложному):
force.on("tick", function(e) { node.attr("transform", function(d) { //TODO move these constants to the header section //center the center (root) node when graph is cooling down if(d.index==0){ damper = 0.1; d.x = d.x + (w/2 - d.x) * (damper + 0.71) * e.alpha; d.y = d.y + (h/2 - d.y) * (damper + 0.71) * e.alpha; } //start is initiated when importing nodes from XML if(d.start === true){ d.x = w/2; d.y = h/2; d.start = false; } r = d.name.length; //these setting are used for bounding box, see [http://blockses.appspot.com/1129492][1] d.x = Math.max(r, Math.min(w - r, d.x)); d.y = Math.max(r, Math.min(h - r, d.y)); return "translate("+d.x+","+d.y+")"; } ); });
Попробуйте изменить обработчик событий force следующим образом:
force.on("tick", function(e) { nodes[0].x = w / 2; nodes[0].y = h / 2; var k = 0.05 * e.alpha; nodes.forEach(function(o, i) { o.y += (nodes[0].y - o.y) * k; o.x += (nodes[0].x - o.x) * k; }); 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; }); });