Я пытаюсь найти правильный метод, чтобы иметь возможность сэкономить силовую диаграмму node позиции макета после ее установки, а затем перезагрузить этот макет и начать снова с одного и того же разрешенного состояния.
Я пытаюсь сделать это, клонировав элементы DOM, содержащие диаграмму, удалив ее, а затем перезагрузив ее.
Это я могу сделать, частично как указано ниже: -
_clone = $('#chart').clone(true,true);
$('#chart').remove();
Выбирает содержащий div, клонирует его и удаляет, а затем
var _target = $('#p1content');
_target.append(_clone);
Выбирает div, который используется для хранения диаграммы и перезагрузки. Перезагруженная диаграмма исправлена.
Я не знаю, как восстановить силу, чтобы позволить манипуляции продолжать. Это возможно? Я хочу сохранить заданное положение узлов.
Еще одна возможность, можно ли перезагрузить позиции node и запустить силу с низкой альфа?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Force layout</title>
<script src="./jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../d3.v3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<div data-role="content" id="p1content">
<div id="chart"></div>
</div>
<script type="text/javascript">
//Width and height
var w = 800;
var h = 600;
//Original data
var dataset = {
nodes: [
{ name: "Adam" },
{ name: "Bob" },
{ name: "Carrie" },
{ name: "Donovan" },
{ name: "Edward" },
{ name: "Felicity" },
{ name: "George" },
{ name: "Hannah" },
{ name: "Iris" },
{ name: "Jerry" }
],
edges: [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 1, target: 5 },
{ source: 2, target: 5 },
{ source: 2, target: 5 },
{ source: 3, target: 4 },
{ source: 5, target: 8 },
{ source: 5, target: 9 },
{ source: 6, target: 7 },
{ source: 7, target: 8 },
{ source: 8, target: 9 }
]
};
//Initialize a default force layout, using the nodes and edges in dataset
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w, h])
.linkDistance([100])
.charge([-100])
.start();
var colors = d3.scale.category10();
//Create SVG element
var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create edges as lines
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
//Create nodes as circles
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d, i) {
return colors(i);
})
.call(force.drag);
//Every time the simulation "ticks", this will be called
force.on("tick", function() {
edges.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; });
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
// After 5 secs clone and remove DOM elements
setTimeout(function() {
_clone = $('#chart').clone(true,true);
$('#chart').remove();
}, 5000);
//After 10 secs reload DOM
setTimeout(function() {
var _target = $('#p1content');
_target.append(_clone);
// WHAT NEEDS TO GO HERE TO RECOUPLE THE FORCE?
}, 10000);
</script>
</body>
</html>
Добавлено это, где я ставлю//ЧТО НУЖНО ПОЙТИ ЗДЕСЬ, ЧТОБЫ ПОЛУЧИТЬ СИЛУ?
Кажется, что это работает, восстанавливая существующие элементы и восстанавливая Силу, где она оставила передачу узлов силы и т.д. В функцию Тайм-аута
force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w, h])
.linkDistance([100])
.charge([-100])
.start();
colors = d3.scale.category10();
//Create SVG element
svg = d3.select("#chart");
//Create edges as lines
edges = svg.selectAll("line")
.data(dataset.edges);
//Create nodes as circles
nodes = svg.selectAll("circle")
.data(dataset.nodes)
.call(force.drag);
//Every time the simulation "ticks", this will be called
force.on("tick", function() {
edges.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; });
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
