Question

我正在尝试在D3 SVG中手动添加d3节点和链接-codepen

我首先在Node Name文本框中输入节点名称，然后按Add N按钮。 IT将节点添加到2个选择框source和target中。添加多个节点后，我选择一个src节点和目标节点，然后单击Add L按钮以在它们之间创建D3链接。

添加节点功能是在SVG上创建一个节点。但是，添加链接时遇到了问题。

function addLink() {
 var x = document.getElementById("srcNodes");
 var y = document.getElementById("targetNodes");
 var link = document.createElement("option");
 var l = document.getElementById("linkedNodes");
 var idSrc = x.value , idTarget =y.value;
 link.text = idSrc + "<->" + idTarget;
 l.add(link);
 addLinkCanvas(idSrc,idTarget)
}


function addLinkCanvas(idSrc,idTarget){
  var nSrc,nTarget;
  alert (idSrc);
  nodes.forEach(function(idSrc) {if(node.id=== idSrc) { nSrc =node;} });
  nodes.forEach(function(idTarget){if(node.id=== idTarget){nTarget=node;}});
  links.push({         source: nSrc,         target: nTarget        });
  restart();
}

Answer 1

您几乎拥有了它，只是您在.js文件顶部将'nSrc'和'nTarget'变量设置为'node'变量。这是一个修复程序（我也做到了，这样您就无法在具有相同id的节点之间创建链接）：

function addLinkCanvas(idSrc,idTarget){
  if (idSrc != idTarget) {
    var source = {},
        target = {};
    nodes.forEach(function (curNode) {
      if (typeof curNode.id != 'undefined') {
        if (curNode.id == idSrc)  {
          source = curNode;
        }
        if (curNode.id == idTarget) {
          target = curNode;
        }
      }
    });

    links.push({
      source: source,
      target: target
    });
    restart();
  }
}

此处的Codepen：https://codepen.io/anon/pen/KBVzWo?editors=0010

在D3中的2个选定节点之间创建手动链接

1 个答案: