javascript - SVG 路径在 D3 力网络图中无法正确渲染

Question

我不知道这里发生了什么，但是当我绘制网络图时，它最终是这样的:

注意右侧的蓝线。我有缩放功能，当我缩放时，右侧的蓝色路径消失。

我的代码库很大，所以我会尝试将一个示例放在 codePen 中，看看是否可以重新创建它。但我用它作为创建弯曲链接的指南:

https://bl.ocks.org/mbostock/4600693

这就是我遇到问题的时候。

一些用于网络创建的代码:

数据

var bilinks = [];
edges.forEach(function (d) {
    var s = d.source;
    var t = d.target;
    var i = {};
    edges.push({
        source: s,
        target: i
    }, {
        source: i,
        target: t
    });

    nodes.push(i);
    bilinks.push({
        source: s,
        target: t,
        middleNode: i
    });
});

路径创建:

linkEnter
    .append('path')
    .attr('id', function (d, i) {
        return d.id
    })
    .attr('class', 'network-path')
    .attr('stroke', function (d) {    
        return colour(d.color);
    })
    .attr('stroke-width', 1)
    .attr('fill', 'none')
    .on('click', function (d) {
        console.log(d);
    })

也许有类似的问题，但我不确定要搜索什么。

顺便说一句，右侧的蓝线无法使用开发人员选择器工具选择。我不确定它会如何，但看起来与显示器连接松动时类似，我真的不确定。

添加:

所以，我隐藏了节点，并进入了元素区域。将鼠标悬停在您在上面看到的路径上，正如您所看到的，边界很小。当我将内容隐藏在蓝色框中时，右侧的一堆路径消失了。当我取消隐藏元素时，它们会返回。我无法通过开发工具中的选择工具选择右侧的路径。

编辑

勾选功能，绘制路径:

link.selectAll('path').attr('d', function (d) {
    // ----
    // Total difference in x and y from source to target
    var diffX = d.target.x - d.source.x;
    var diffY = d.target.y - d.source.y;

    // Length of path from center of source node to center of target node
    var pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

    // x and y distances from center to outside edge of target node
    var offsetX = (diffX * nodeSize) / pathLength;
    var offsetY = (diffY * nodeSize) / pathLength;

    // return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);

    var thisPath = 'M' + d.source.x + ',' + d.source.y +
        'S' + d.middleNode.x + ',' + d.middleNode.y +
        ' ' + (d.target.x - offsetX) + ',' + (d.target.y - offsetY);

    return thisPath;

});

这里是 Bostock 示例的 codePen : https://codepen.io/anon/pen/ePJbKZ

如果将其中一个节点拖到另一个节点之上，您应该能够看到问题。

Answer 1

问题是当点共线时三次贝塞尔样条线的渲染。

如果将 d3.forceManyBody() 设置为 -1 强度，效果会更加明显。

看起来这是删除这些三次贝塞尔样条线时的渲染问题(舍入错误)。如果将节点拖动到幻影线上，它们就会消失，因为 SVG 的这一部分会重新渲染。

选择不同的样条线类型Q或L(直线)不会出现此删除问题。