为什么我的 D3 力布局图线延伸成圆形？答案

【问题标题】：Why are my D3 force layout diagram lines extending into circles?为什么我的 D3 力布局图线延伸成圆形？
【发布时间】：2013-01-12 07:11:15
【问题描述】：

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

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

【问题讨论】：

标签： d3.js force-layout

【解决方案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; })

【讨论】：

感谢您的提醒；在我看到你的帖子之前，灯泡就亮了。