D3 js线重叠节点

时间:2014-02-19 11:35:47

标签: d3.js force-layout

我正在进行强制布局,在事件点击我添加新节点并按行连接。但 线重叠节点。为什么?我的代码显示为http://jsfiddle.net/WRGtL/

function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  //alert("clicked");
  var d = {id:"d"};
  nodes.push(nodeId[index]);
  if(index==0)
  links.push({source: a, target: nodeId[index]});
      else
      links.push({source: nodes[1], target: nodeId[index]});
  index++;
  start();
}

1 个答案:

答案 0 :(得分:6)

在SVG中,Z order of elements is the order they appear in the file。让所有线条显示在圆圈下方的最简单方法是将所有线条和所有圆圈分组在各自的组中,并让这些组定义Z顺序。

我只是添加了两个组linksGnodesG,这些组件将在以下位置创建:

var linkG = svg.append("g"),
    nodeG = svg.append("g");

var node = nodeG.selectAll(".node"),
    link = linkG.selectAll(".link");

请参阅JSFiddle了解演示。

编辑:忘了保存小提琴。链接已修复。