D3 (?): Проблемы между узлами и связываетD3 макет силы: ссылки и узлы --- г-индекс
Я создал следующий jsfiddle, чтобы получить представление о том, что я пытаюсь достичь:
Я хочу узлы над (?) ссылки ...
Пожалуйста, помогите мне. Я извиняюсь за мой английский :)
Сценарий выглядит следующим образом:
function myGraph(el) {
this.addNode = function (id) {
nodes.push({ "id": id });
update();
}
this.removeNode = function (id) {
var i = 0;
var n = findNode(id);
while (i < links.length) {
if ((links[i]['source'] == n) || (links[i]['target'] == n)) links.splice(i, 1);
else i++;
}
nodes.splice(findNodeIndex(id), 1);
update();
}
this.addLink = function (source, target) {
links.push({ "source": findNode(source), "target": findNode(target) });
update();
}
var findNode = function (id) {
for (var i in nodes) { if (nodes[i]["id"] === id) return nodes[i] };
}
var findNodeIndex = function (id) {
for (var i in nodes) { if (nodes[i]["id"] === id) return i };
}
// set up the D3 svg in the specified element
var w = window.jQuery(el).innerWidth(),
h = window.jQuery(el).innerHeight();
var svg = this.svg = d3.select(el).append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-120)
.size([w, h]);
var nodes = force.nodes(),
links = force.links();
var update = function() {
var link = svg.selectAll(".link")
.data(links, function (d) { return d.source.id + "-" + d.target.id; })
link.enter().append("line")
.attr("class", "link")
link.exit().remove();
var node = svg.selectAll(".node")
.data(nodes, function (d) { return d.id; })
node.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", function (d) { return 30; })
.style("fill", "#EFEFEF")
node.append("text")
.attr("text-anchor", "right")
.text(function (d) { return d.id; });
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("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
});
// Restart the force layout.
force.start();
}
// Make it all go
update();
}
graph = new myGraph("#graph");
// You can do this from the console as much as you like...
graph.addNode("Cause");
graph.addNode("Effect");
graph.addLink("Cause", "Effect");
graph.addNode("A");
graph.addNode("B");
graph.addLink("A", "B");
Хотя этот метод работал для меня, проблема в том, что мне нужно добавлять/удалять новые узлы/ссылки. Например, при добавлении новой ссылки ссылка появляется поверх двух узлов, к которым она присоединена. Есть ли способ всегда делать это под узлами? Я попытался добавить дополнительный пустой 'g', но я получаю ошибки, связанные с enter(), и я не могу понять, почему' svg.append («g»). Append («g»). Attr («class», узлы ");' – Nav
Я бы сохранил ссылки и узлы в разных элементах 'g' вообще. Затем вы можете обеспечить соблюдение порядка в ссылках и узлах, но относительно друг друга они останутся в том же порядке. –
спасибо, он работает me.i новичок в svg, почему он исправить эту проблему? –