Javascript D3动态分层边缘绑定-双向导入

我正在尝试基于M Bostock（）实现创建动态分层边缘绑定：

我的数据集的bl.ocks版本如下：

与原始情况不同，节点1和节点2之间的关系是单向的（即节点1可以导入节点2或其他方式），在我的数据集中，节点1和节点2可以具有双向导入关系。这在业务流程流中经常发生，这就是我将要应用的地方

• 当前的挑战：

在本例中—“评估”导入“创建QOS降级报告”和“创建QOS…”导入“评估”。但当鼠标悬停时，“评估”节点-“创建…”显示为红色，但线条为绿色。当鼠标位于节点“创建…”上时，导入行以及“评估”显示为红色

• 预期要求：

我的要求是，如果存在双向导入，则-1。线条和其他节点应以第三种颜色（红色或绿色除外）或2显示。该线以及其他节点将显示为红色

---

任何指向这一点的指针都会有所帮助。我有D3的基本知识，但我不是一个数据可视化专家，只是尝试在我的工作领域使用可视化来更好地交流

有几种方法可以做到这一点，但这是目前为止我能想到的最简单的方法

请注意，bl.ock中的

assessment

和

Create QoS degration Report

之间有两条路径，它们的值相等但相反（因为它们都是彼此的源和目标）。其中一个完全位于另一个之上，使它们看起来像一条单独的路径。这就是为什么这两个节点之间的链接有些参差不齐，而其他节点是平滑的。也许我们可以利用这一点

如果将CSS中的

link--source

和

link--target

的定义调整为不透明度值小于1，则部分透明的源链接将与部分透明的目标链接重叠，呈现“新”的不同颜色

对于节点颜色，创建一个新的CSS类

节点——都使用“新”颜色，如果
n.source
和
n.target
在
mousovered
函数中均为true，则将其应用于节点

node
    .classed("node--both", function(n) { return n.source && n.target; })
    .classed("node--target", function(n) { return n.target; })
    .classed("node--source", function(n) { return n.source; });

这并不完美，但这里有一把小提琴演示了这一点：

关键是要适当地选择源链接和目标链接的颜色和不透明度值（我没有这样做），这样无论源链接还是目标链接处于“顶部”，您都可以获得与源链接和目标链接足够不同的新颜色以及相同的颜色。在当前的fiddle版本中，您可以看到颜色略有不同，这取决于哪个节点处于活动状态。或者类似的东西可能会有所帮助

您还可以尝试操纵
链接
数组，将两个相同的路径合并为一个路径，并添加一个属性以指示这是源链接和目标链接，并在以后处理时使用该属性

更新：您在评论中的想法是正确的。无论如何，色彩把戏更像是一种恶作剧

links
数组包含两个项目，用于双向导入节点之间的一条路径。让我们删除其中一个，并在另一个中设置一个属性，以指示这是一个双向导入

var unique_links = links.reduce(function(p,c) {
    var index=p.map(function(d,i) { if(d.source===c.target && d.target===c.source) return i;}).shift();
    if(!isNaN(index)) p[index].both=true; else p.push(c);
    return p;
 },[]);

现在，
unique\u links
每条边只有一个元素，而这一元素具有
tware=true
。我们还将
both
属性传递给bundle布局

link = link
      .data(bundle(unique_links))
    .enter().append("path")
      .each(function(d) {
        d.source = d[0], 
        d.target = d[d.length - 1],
        d.both = unique_links.filter(function(v) { if (v.source===d.source && v.target===d.target) return v.both; }).shift();
      })
      .attr("class", "link")
      .attr("d", line);

最后一步是更改
mouseovered
函数，以使用
both
设置具有不同颜色的新CSS类：

function mouseovered(d) {
  node
      .each(function(n) { n.target = n.source = false; });

  link
      .classed("link--both", function(l) { if((l.target===d || l.source===d) && l.both) return l.source.source = l.source.target = l.target.source = l.target.target = true;})
      .classed("link--target", function(l) { if (l.target === d && !l.both) return l.source.source = true; })
      .classed("link--source", function(l) { if (l.source === d && !l.both) return l.target.target = true; })
    .filter(function(l) { return l.target === d || l.source === d; })
      .each(function() { this.parentNode.appendChild(this); });

  node
      .classed("node--both", function(n) { return n.target && n.source; })
      .classed("node--target", function(n) { return n.target; })
      .classed("node--source", function(n) { return n.source; });
}

并重置鼠标移出的
中的类：

function mouseouted(d) {
  link
      .classed("link--both", false)
      .classed("link--target", false)
      .classed("link--source", false);

  node
      .classed("node--both", false)
      .classed("node--target", false)
      .classed("node--source", false);
}

记住在CSS中定义新类：

.link--both {
  stroke: orange;
}

.node--both {
  fill: orange;
}

下面是一个完整代码的更新版本：
非常感谢OrionMelt。我试着利用色彩混合。虽然它非常聪明，节点颜色也得到了处理，但链接颜色仍然是一个挑战。仅单向导入存在颜色对比，当鼠标移到节点1和节点2上时，显示的颜色不同（在这种情况下，节点1和节点2具有双向导入）。我尝试了几种颜色和不透明度的组合，但这种情况似乎持续存在。我正在尝试探索你的另一个想法——玩链接数组。关于目标位置的任何指示/建议都会有帮助吗？再次感谢，我的理解是，这段代码中的链接数组是需要进行更改的地方。当前，如果节点1和节点2具有双向链接，则在此数组中创建两个数组项（排列）。可能需要做的是：在构建阵列之后，检查冗余，删除其中一个重复项，并标记另一个，说明它是双向链接。此标签可在着色时使用。请让我知道这是否是一种方法。在这种情况下，你能帮我处理代码部分吗？这有点令人费解，当我试图使用一个更大、不同的数据集时，同一个工作出色的代码有一个小问题。处理更大、不同数据集的麻烦就在这里。虽然其他一切正常，但双向链接不是橙色的（应该是橙色的）。鉴别诊断可能指向数据集，但json格式的数据集看起来不错。。。。任何指针都是有用的，就像我们如何构造唯一链接数组时出现了错误一样。错误的假设是map函数将始终包含匹配的索引作为第一个元素，而shift将返回第一个元素。但是，如果第一个元素恰好未定义，shift将返回undefined。在移位前过滤数组中的未定义项修复了此问题。请参见此处更新的fiddle：