D3 强制布局：链接和节点 --- z-index(?)

Question

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

Answer 1

SVG 中没有 z-index 属性；元素按照指定的顺序呈现。这意味着对您而言，所有链接元素都必须位于生成的 DOM 中的节点元素之前。

实现这一点的最简单方法是为链接和节点设置单独的 g 元素，前者在前。

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

然后你可以像这样附加链接

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

和节点也是如此。完成演示here。