如何让我的D3线分裂？

Question

我最近创建了一个节点映射，其中包含多个节点，每个节点之间都有行/箭头。我在这里重新创建了我的代码：https://jsfiddle.net/GarrettUK/51j2rx1t/。我想知道是否有人可以告诉我如何在线上创建一个点击功能，以便在点击一行时...显示2行。因此，当它点击时，我们将在中间点击两条线，并在两侧添加两条新线。

我已经开始创建点击功能，如示例中所示。我有一个理论，你会创建连接到每个节点但隐藏它们的2条额外线。然后当你点击该行。该功能将这些线从隐藏切换到显示。

我的on-click功能在示例中如下所示：

.on("click", function(){
      // Determine if current line is visible
      var active   = redLine.active ? false : true ,
        newOpacity = active ? 0 : 1;
      // Hide or show the elements
      d3.select("#redLine").style("opacity", newOpacity);
      // Update whether or not the elements are active
      redLine.active = active;
    });