D3J使用呼叫更新错误的元素

Question

我是D3JS的新手，您可以在http://jsfiddle.net/3n8wD/找到代码。

我面临一个问题，任何指点都会有所帮助

当我移动直线时，它会按预期分离，但是当我尝试将圆圈移开时，它会跳回到直线上。

在检查数组时，好像圆数组在我移动链接时正在更新，不确定是什么原因引起的。

任何帮助，将不胜感激。 下面是我在jsfiddle上的代码

var width = 960,
    height = 500;
graph1 = {"nodes":[{"x":444,"y":275},{"x":378,"y":324}],"links":[{"source":1,"target":0}]}


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var onDraggable = function(d1) {
          console.log(d1);

          d1.x = d3.event.x, d1.y = d3.event.y;
          d3.select(this).attr("cx", d1.x).attr("cy", d1.y);
          //console.log(d1);
          link.filter(function(l) { return l.source === d1; }).attr("x1", d3.event.x).attr("y1", d3.event.y);
          link.filter(function(l) { return l.target === d1; }).attr("x2", d3.event.x).attr("y2", d3.event.y);


        }
var drag = d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("drag", onDraggable)




  var onDraggable1 = function(d) {
          //d.x1 = d3.event.x1, d.y1 = d3.event.y1, d.x2=d3.event.x2, y2=d3.event.y2;
          var mouseX = d3.mouse(this)[0];
          var mouseY = d3.mouse(this)[1];
          var relativeX = mouseX-d.source.x;
          var relativeY = mouseY-d.source.y;
          console.log(d);

          //console.log(d);
         // d3.select(this).attr("x1", d3.event.x).attr("y1", d3.event.y).attr("x2", d3.event.x).attr("y2", d3.event.y);
          d.source.x= d.source.x+relativeX;
          d.source.y = d.source.y+relativeY;
          d.target.x= d.target.x+relativeX;
          d.target.y = d.target.y+relativeY;

          d3.select(this).attr("x1", d.source.x).attr("y1", d.source.y);
          d3.select(this).attr("x2", d.target.x).attr("y2", d.target.y);

        }
var drag1 = d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("drag", onDraggable1);

  graph1.links.forEach(function(d) {
    d.source = graph1.nodes[d.source];
    d.target = graph1.nodes[d.target];
  });




var node = svg.append("g").attr("class","node")
    .selectAll("circle")
      .data(graph1.nodes)
    .enter().append("circle")
      .attr("r", 4)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .call(drag);

var link = svg.append("g").attr("class","link")
    .selectAll("line")
      .data(graph1.links)
    .enter().append("line")
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; })
      .attr("stroke-width", 2)
      .attr("stroke", "black")
      .call(drag1);

Answer 1

即使在将行移开之后，您的节点仍“跳到”行末的原因是因为该节点的数据对象与该行的源/目标数据对象是同一对象。 节点的d值和链接的d.source或d.target值只是指向浏览器内存中同一对象的指针（引用）。 您对该数据对象所做的一切都会在链接和节点中反映出来。 这就是使节点拖动功能起作用的原因：直接更改数据对象，然后更新线和圆的位置以匹配其已更改的数据值。

因此，即使您在移动直线时不更新圆的cx和cy位置，直线拖动方法中的语句d.source.x = etc也将为节点设置dx和dy值。 然后，在节点拖动方法中，当您访问这些值以确定新位置时，将相对于线的末端而不是相对于屏幕上圆的位置来确定移动。

那么，如何将所需的行为与节点分开呢？ 开始拖动时，您需要为该行的源和目标创建一个新的数据对象，该数据对象不再引用节点的数据对象。 在拖动开始时，只需执行一次，因此可以使用拖动行为对象的dragstart事件 ：

var drag1 = d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("dragstart", separateNodes);
      .on("drag", onDraggable1);

separateNodes方法将很短。 对于链接的目标和源，我们要做的就是创建一个新的数据对象，该对象是现有目标/源对象的副本（但可以独立于原始对象进行编辑）。 Javascript没有复制对象的任何默认方法（尽管各种扩展名都有），但是如果所讨论的对象仅由x和y属性组成，则很容易做到。

var separateNodes = function(d) {
    //create new data objects that are copies of d.source and d.target
    var newSource = {x:d.source.x, y:d.source.y};
    var newTarget = {x:d.target.x, y:d.target.y};

    //set the new objects as the target/source of this link
    d.source = newSource; 
    d.target = newTarget;
}

您甚至可以跳过变量声明，仅将其全部合并为源代码行和目标代码行，但我发现这样更容易理解。 但是，我应该指出的是，这种方法之所以有效，是因为x和y都是简单的数据类型（数字），而不是对象的指针。 因此，当它说x:d.source.x ，您实际上是在获取该编号的新副本，可以对其进行更改而不会影响包含该编号的原始对象。

但是，如果节点和链接还具有一个value属性，该属性是一个复杂的数据对象，则必须决定当该行与节点分离时要执行的操作：是否要创建整个值数据的副本？对象，还是维护到原始对象的链接，或者将其替换为空（空/未定义）对象？ 第一种情况很复杂，取决于值对象的数据结构。 第二秒钟，您不需要执行任何操作（除非记住您有多个指向同一对象的指针）； 对于最后一种情况，您只需在separateNodes的newSource函数中为newSource和newTarget对象定义添加value:null,属性。

希望一切都有道理，
--ABR