D3 Kraftaufteilung: Links und Knoten --- z-index

Question

D3 (?): Probleme zwischen den Knoten und Links

ich folgende jsfiddle erstellt eine Vorstellung davon zu bekommen, was ich versuche zu erreichen:

ich möchte Knoten über (?) Links ...

Bitte mir helfen. Es tut mir leid für mein Englisch :)

Script sieht wie folgt aus:

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"); 

Answer 1

Es gibt keine z-index Eigenschaft in SVG; Die Elemente werden in der Reihenfolge gerendert, in der sie angegeben sind. Dies bedeutet für Sie, dass alle Verknüpfungselemente vor den Knotenelementen im generierten DOM stehen müssen.

Der einfachste Weg, dies zu erreichen, ist separate Elemente g für Links und Knoten, mit ersteren zuerst.

svg.append("g").attr("class", "links"); 
svg.append("g").attr("class", "nodes"); 

Dann können Sie Links anhängen wie diese

var link = svg.select(".links").selectAll(".link") 
     .data(links, function (d) { return d.source.id + "-" + d.target.id; }) 
// etc 

und Knoten ebenfalls. Komplette Demo here.