Question

我正在尝试使用d3.js实现概念图网络图。图表的样本可以在js-fiddle中找到。

节点方向仅指向左方向。右侧的所有节点都具有矩形背面的线条。我想显示左侧和右侧的所有节点。

预期图表：

Answer 1

我通过使用此代码检查曲线位置找到了解决方案。

 if(af.x>180)
 {
   af.xOffset = -S;
 }else
 {
   af.xOffset = S;
 }

并检查推送功能的条件

if (ab.x > 180) {
                    H.push({
                        source: ae,
                        target: ab,
                        key: aa,
                        canonicalKey: aa,
                        x1: ae.x + (ab.type === "theme" ? 0 : U),
                        y1: ae.y + K / 2,
                        x2: Math.cos(Y) * X + ab.xOffset,
                        y2: Math.sin(Y) * X
                    })
                }
                else if (ae.x < 180) {
                    H.push({
                        source: ae,
                        target: ab,
                        key: aa,
                        canonicalKey: aa,
                        x1: ae.x + (ab.type === "theme" ? U : 0),
                        y1: ae.y + K / 2,
                        x2: Math.cos(Y) * X + ab.xOffset,
                        y2: Math.sin(Y) * X
                    })
                }

预期产出

Answer 2

您遇到的问题是节点链接加入左上角。那个中心专栏。

你需要：

找到右侧所有链接的来源。
将源x位置偏移中心列的宽度。

我可能已经将源和目标混淆了。代码看起来部分缩小，因此很难阅读。

您可以相对轻松地获取元素的宽度（Example）。

您可以通过比较源和目标x位置来识别是否应该更改链接。

或者，您可以查看链接到右侧某些内容的节点，这些节点可能稍微复杂一些，但可以识别需要更准确更改的链接。

修改

您也可以尝试绑定到节点的中心，而不是角落。

概念图网络 - 节点问题

2 个答案: