d3.js - 为什么我的 D3 力布局图线延伸成圆圈？

Question

它在这里没有做任何奇怪的事情。但我似乎无法让它们与圆圈的外边缘相匹配。任何帮助将不胜感激。

        // Create Nodes
    var node = svg.selectAll(".node")
        .data(force.nodes())
        .enter().append("g")
        //.group(d.group)
        .attr("class", "node")
        .on("mouseover", nodeMouseover)
        .on("mouseout", nodeMouseout)
        .call(force.drag);

    // Append circles to Nodes
    var circle = node.append("circle")
        .attr("r", 8)
        .style("stroke", function (d) { return d.BaseColor; })
        .attr("id", function (d) { return d.ID; })
        var link = svg.selectAll(".link")
        .data(force.links())
        .append("line")
        .attr("class", "link arrow")

    // Draw lines for Links between Nodes
    var link = svg.selectAll(".link")
        .data(force.links())
        .append("line")
        .attr("class", "link arrow")

Answer 1

在 svg 中，创建的最新对象位于最前面，这就是您通常在节点之前创建链接的原因。默认情况下，链接附加到节点的中心。例如，如果您将节点的不透明度更改为稍微透明，您可以看到这一点。

// Draw lines for Links between Nodes
var link = svg.selectAll(".link")
    .data(force.links())
    .append("line")
    .attr("class", "link arrow")

// Create Nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    //.group(d.group)
    .attr("class", "node")
    .on("mouseover", nodeMouseover)
    .on("mouseout", nodeMouseout)
    .call(force.drag);

// Append circles to Nodes
var circle = node.append("circle")
    .attr("r", 8)
    .style("stroke", function (d) { return d.BaseColor; })
    .attr("id", function (d) { return d.ID; })