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

为什么我的D3力布局图线延伸到圆圈？

1 个答案: