SVG路径在D3强制网络图中无法正确呈现 [英] SVG path doesn't render correctly in D3 force network graph

问题描述

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

I have no idea what is happening here, but when I draw my network diagram, it ends up like this :

请注意右侧的蓝线.我具有缩放功能，缩放后，右侧的蓝色路径会消失.

Notice the blue lines to the right. I have a zooming ability, and when I zoom, the blue paths on the right disappear.

我的代码库很大，所以我将尝试将一个CodePen和一个示例放在一起，以查看是否可以重新创建它.但是我以此为指导来创建弯曲的链接:

My code base is huge, so I'll try get a codePen together of an example to see if I can recreate it. But I used this as a guideline for creating curved links :

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

这是我遇到的问题.

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

Some code for the network creation :

数据

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

也许那里有类似的问题，但是我不确定要搜索什么.

Perhaps there is a similar question out there, but I'm not sure what to search for.

顺便说一下，右侧的蓝线无法通过开发人员选择器工具进行选择.我不确定会如何，但是看起来与显示器连接松动时非常相似.

By the way, thie blue lines on the right are not selectable with the developer selector tool. I'm not sure how it would, but looks similar to when you have a loose monitor connection, I'm really not sure.

已添加:

因此，我隐藏了节点，然后进入了元素区域.将鼠标悬停在上方的路径上，如您所见，边界很小.当我将内容隐藏在蓝色框中时，右侧的路径消失了.当我取消隐藏元素时，它们会返回.我无法通过开发工具中的选择工具选择右侧的路径.

So, I've hidden the nodes, and gone into the elements area. Hovered over the paths you see above, and as you can see, the boundary is only small. When I hide the content in the blue box, the bunch of paths to the right disappear. When I unhide the elements, they return. I can not select the paths to the right via the select tool in dev tools.

编辑

勾号功能，绘制路径:

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

Here is a codePen of the Bostock example : https://codepen.io/anon/pen/ePJbKZ

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

If you drag one of the nodes ontop of the other, you should be able to see the issue.

推荐答案

问题是当点共线时，三次Bezier样条线的渲染.

The problem is the rendering of the Cubic Bezier splines when the points are co-linear.

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

If you set the d3.forceManyBody() to a strength of -1 the effect is more visible.

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

It looks like it is a render problem (rounding error) in the erasing of these Cubic Bezier splines. If you drag a node over the ghost lines they disappear because this part of the SVG is re-rendered.

选择其他样条线类型Q或L(直线)不会出现此擦除问题.

Choosing a different spline type Q or L (straight line) does not have this erase problem.

这篇关于SVG路径在D3强制网络图中无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！