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示例的代码笔：https://codepen.io/anon/pen/ePJbKZ

如果将一个节点拖到另一个节点上，则应该可以看到问题。

Answer 1

问题在于当点共线时，三次Bezier样条线的渲染。

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

在擦除这些三次贝塞尔曲线样条曲线时，似乎是一个渲染问题（舍入误差）。如果将节点拖到幻影线上，它们将消失，因为SVG的这一部分已重新渲染。

选择其他样条线类型Q或L（直线）不会出现此擦除问题。

SVG路径在D3强制网络图中无法正确呈现

1 个答案: