链接后,路径不随节点一起移动

时间:2016-06-19 15:40:47

标签: javascript d3.js nodes

我是D3 js开发的新手。在链接(路径)到节点时,我遇到了问题。移动节点时,链接不随其移动。顺便说一句,我使用了d.fixed = true;在这个项目中。

这是附加的GIF,让你们看看问题是什么。

issue

以下是JSFiddle的链接: Complete Code Here

这是我在拖动链接并在node.mouseover上连接时调用的函数。

function connectCurrentLink(d, data, targetL, sourceL) {
  var destinationNode = JSON.parse(JSON.stringify(d));
  if (destinationNode.id == targetL.id || destinationNode.id == sourceL.id) {
    removeDraggableLine();
    console.log("Drag to self id ");
    return;
  }

  // check if what direction the arrow is
  var arrowFromLeft = JSON.stringify(data['left']);

  var source, target, direction;
  if (arrowFromLeft == 'true') {
    source = destinationNode;
    target = targetL;
    direction = 'left';
    console.log("arrowFromLeft = " + arrowFromLeft +
  " startingNode " + targetL.id + " destinationNode " + destinationNode.id);
  } else {
    source = sourceL;
    target = d;
    direction = 'right';
    console.log("arrowFromLeft = " + arrowFromLeft +
  " startingNode " + sourceL.id + " destinationNode " + destinationNode.id);
  }

  var link;
  link = links.filter(function(l) {
    return (l.source === source && l.target === target);
  })[0];

  if (link) {
    link[direction] = true;
  } else {
    link = {
      source: source,
      target: target,
      left: false,
      right: false
    };
    link[direction] = true;
    links.push(link);
  }

  console.log("Link " + JSON.stringify(link));

  // hide the dragged arrow after connecting
  drag_line
    .style('marker-end', 'url(#end-arrow)')
    .classed('hidden', true)
    .attr('d', 'M' + destinationNode.x + ',' + destinationNode.y + 'L' + destinationNode.x + ',' + destinationNode.y);

  removeDraggableLine();
}



function removeDraggableLine() {
  d3.select("path.connect").remove();
  selected_link = null;
  hasHangingLink = false;
  selected_node = null;
  isDraggingLink = false;
  isLinkTempDeletedAlready = false;
}

0 个答案:

没有答案