D3 鏈接和節點的 z-index

Question

我有一個 D3v4 圖，我可以在其中動態添加節點。 我的問題是每個添加的節點都會在所選節點上方繪制鏈接。 調整 z-index 似乎沒有什么改變。 addNode()創建一個新鏈接和新節點。 該節點是硬編碼和動態之間的混合。 此外，我將新創建的鏈接推送到原始圖形數組，節點也是如此。

任何提示我如何解決問題？

在我使用的addNode() ：

function addNode(d) {
    var newid = graph.nodes.length

    var newLink = { source: newid, target: d.id, type: "uses" }
    graph.links.push(newLink)

    graph.nodes.push({
        "id": newid,
        "type": "software",
        "name": "Node",
        "icon": "\ue084",
        "parent": d.id,
        "level": d.level + 1,
        "childs": false,
        "context": [
            {
                "name": d.name
            }
        ],
    })

    link = svg.selectAll(".link")
        .data(graph.links)
        .enter()
        .append("line")
        .attr("class", "link")
        .style("pointer-events", "none")
        .attr('marker-end', 'url(#arrowhead)')
        .style("display", "block")
        .merge(link)

    linkPaths = svg.selectAll(".linkPath")
        .data(graph.links)
        .enter()
        .append('path')
        .style("pointer-events", "none")
        .attrs({
            'class': 'linkPath',
            'fill-opacity': 1,
            'stroke-opacity': 1,
            'id': function (d, i) { return 'linkPath' + i }
        })
        .merge(linkPaths)

    linkLabels = svg.selectAll(".linkLabel")
        .data(graph.links)
        .enter()
        .append('text')
        .style("pointer-events", "none")
        .attrs({
            'class': 'linkLabel',
            'id': function (d, i) { return 'linkLabel' + i },
            'font-size': 12,
            'fill': 'black'
        })
        .merge(linkLabels)

    linkLabels.append('textPath')
        .attr('xlink:href', function (d, i) { return '#linkPath' + i })
        .style("text-anchor", "middle")
        .style("pointer-events", "none")
        .attr("startOffset", "50%")
        .text(function (d) { return d.type })
        .merge(linkLabels)

    node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("stroke", "white")
        .attr("stroke-width", "2px")
        .call(d3.drag()
            .on("start", dragStarted)
            .on("drag", dragged)
            .on("end", dragEnded)
        )
        .on("contextmenu", d3.contextMenu(menu))
        .merge(node)

    node.append("circle")
        .attr("r", 30)
        .style("fill", initialNodeColor)
        .on("mouseenter", mouseEnter)
        .on("mouseleave", mouseLeave)
        .on("click", click)
        .on("dblclick", dblclick)
        .on("contextmenu", d3.contextMenu(menu))
        .merge(node)

    node.append("text")
        .style("class", "icon")
        .attr("font-family", "FontAwesome")
        .attr("dominant-baseline", "central")
        .attr("text-anchor", "middle")
        .attr("font-size", 30)
        .attr("fill", "black")
        .attr("stroke-width", "0px")
        .attr("pointer-events", "none")
        .text(function (d) { return d.icon })
        .on("contextmenu", d3.contextMenu(menu))
        .merge(node)

    simulation.nodes(graph.nodes);
    simulation.force("link").links(graph.links);

    //reheat the simulation
    simulation.alpha(0.3).restart()
}

Answer 1

Z-index 不適用於 svg。 Svg 將按元素出現的順序繪制元素。

所以你需要在鏈接之后添加節點，所以它們在上面。

因為您是在稍后階段添加新節點/鏈接，所以您可以這樣做：

1. 創建父容器（第一個用於鏈接，然后一個用於節點）

var linksContainer = svg.append('g').attr('class', 'linksContainer');
var nodesContainer = svg.append('g').attr('class', 'nodesContainer');

2. 現在您可以添加和更新容器的節點和鏈接，而不是在 svg 中，並且確保節點始終位於鏈接的頂部

例如：（我希望我沒有錯過任何 svg）

function addNode(d) {
    var newid = graph.nodes.length

    var newLink = { source: newid, target: d.id, type: "uses" }
    graph.links.push(newLink)

    graph.nodes.push({
        "id": newid,
        "type": "software",
        "name": "Node",
        "icon": "\ue084",
        "parent": d.id,
        "level": d.level + 1,
        "childs": false,
        "context": [
            {
                "name": d.name
            }
        ],
    })

    link = linksContainer.selectAll(".link")
        .data(graph.links)
        .enter()
        .append("line")
        .attr("class", "link")
        .style("pointer-events", "none")
        .attr('marker-end', 'url(#arrowhead)')
        .style("display", "block")
        .merge(link)

    linkPaths = linksContainer.selectAll(".linkPath")
        .data(graph.links)
        .enter()
        .append('path')
        .style("pointer-events", "none")
        .attrs({
            'class': 'linkPath',
            'fill-opacity': 1,
            'stroke-opacity': 1,
            'id': function (d, i) { return 'linkPath' + i }
        })
        .merge(linkPaths)

    linkLabels = linksContainer.selectAll(".linkLabel")
        .data(graph.links)
        .enter()
        .append('text')
        .style("pointer-events", "none")
        .attrs({
            'class': 'linkLabel',
            'id': function (d, i) { return 'linkLabel' + i },
            'font-size': 12,
            'fill': 'black'
        })
        .merge(linkLabels)

    linkLabels.append('textPath')
        .attr('xlink:href', function (d, i) { return '#linkPath' + i })
        .style("text-anchor", "middle")
        .style("pointer-events", "none")
        .attr("startOffset", "50%")
        .text(function (d) { return d.type })
        .merge(linkLabels)

    node = nodesContainer.selectAll(".node")
        .data(graph.nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("stroke", "white")
        .attr("stroke-width", "2px")
        .call(d3.drag()
            .on("start", dragStarted)
            .on("drag", dragged)
            .on("end", dragEnded)
        )
        .on("contextmenu", d3.contextMenu(menu))
        .merge(node)

    node.append("circle")
        .attr("r", 30)
        .style("fill", initialNodeColor)
        .on("mouseenter", mouseEnter)
        .on("mouseleave", mouseLeave)
        .on("click", click)
        .on("dblclick", dblclick)
        .on("contextmenu", d3.contextMenu(menu))
        .merge(node)

    node.append("text")
        .style("class", "icon")
        .attr("font-family", "FontAwesome")
        .attr("dominant-baseline", "central")
        .attr("text-anchor", "middle")
        .attr("font-size", 30)
        .attr("fill", "black")
        .attr("stroke-width", "0px")
        .attr("pointer-events", "none")
        .text(function (d) { return d.icon })
        .on("contextmenu", d3.contextMenu(menu))
        .merge(node)

    simulation.nodes(graph.nodes);
    simulation.force("link").links(graph.links);

    //reheat the simulation
    simulation.alpha(0.3).restart()
}