d3力网络图中SVG路径呈现不正确

我不知道这里发生了什么,但是当我绘制网络图时,结果是这样的:

注意右边的蓝线。我有缩放能力,当我缩放时,右边的蓝色路径会消失。

我的代码库很大,所以我将尝试将一个示例的代码笔放在一起,看看是否可以重新创建它。但我用这个作为创建曲线链接的指南:

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

这是我遇到问题的时候。

网络创建的一些代码:

数据< /P>

var bilinks=[];
边。foreach(函数(d){
var s=d.源;
var t=d.目标;
var i={};
边推({)
资料来源:
目标:我
},{
资料来源:
目标:T
(});

推送(I)节点;
推送({)
资料来源:
目标:
米德诺德:我
(});
(});
< /代码> 

路径创建:

链接中心
追加(“路径”)
.attr('i d',函数(d,i){
返回D.ID
})
.attr('类','网络路径')
.attr(“行程”,功能(d){
返回颜色(d.color);
})
.attr(“笔画宽度”,1)
.attr('填充','无')
.on(“单击”,函数(d){
控制台。日志(D);
})
< /代码> 

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

顺便说一下,右边的蓝线不能用开发者选择工具来选择。我不确定它会怎样,但看起来与您的显示器连接松动时类似,我真的不确定。


:



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


<>编辑< /P>

勾选功能,绘制路径:

link.selectall('path').attr('d',function(d){
//
//从源到目标的x和y的总差
var diffx=d.target.x-d.source.x;
var diffy=d.target.y-d.source.y;

//从源节点中心到目标节点中心的路径长度
var pathlength=math.sqrt((diffx*diffx)+(diffy*diffy));

//目标节点中心到外边缘的X和Y距离
var offsetx=(diffx*nodesize)/路径长度;
var offsety=(diffy*nodesize)/路径长度;

//返回“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);

返回此路径;

(});
< /代码> 

下面是bostock的代码笔示例:https://codepen.io/anon/pen/epjbkz

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


注意右边的蓝线。我有缩放能力,当我缩放时,右边的蓝色路径消失了。

我的代码库很大,所以我将尝试将一个示例的代码笔放在一起,看看是否可以重新创建它。但我将其用作创建曲线链接的准则:

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


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

顺便说一下,右边的蓝线不能用开发者选择工具来选择。我不知道会怎样,但看起来像是当你的显示器连接松动时,我真的不确定。

补充:



所以,我隐藏了节点,进入了元素区域。将鼠标悬停在上面看到的路径上,如您所见,边界很小。当我将内容隐藏在蓝色框中时,右边的一堆路径就消失了。当我取消隐藏元素时,它们会返回。我不能通过dev tools中的select工具选择右边的路径。

编辑

勾选功能,绘制路径:

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

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