1

所以，我在这里提出另一个问题：我在 D3 中建立了一个网络。它的节点都是不固定的，只有一个。所有未固定的都可以拖动到任何你想要的地方，但在 svg.xml 中。为了提供这一点，我在脚本末尾测试了新坐标。但是，如果我移动固定节点，则所有其他节点都会与这个节点一起拖动。我的问题是，节点似乎获得了相对于父对象的坐标，在这种情况下，它是提供组拖动的 g-Elements。所以拖了之后他们还是有限制的，但是他们是和组一起移动的。欢迎提供任何有用的提示:) 以下是我的部分代码：

var node = group.selectAll(".node")
    .data(reqNodes)                                             
 .enter().append("g")                                   
    .attr("transform", function(d) { return "translate(0,0)"; })
    .attr("class", function(d) {
       return d.fixed ? 'node fixed' : 'node not-fixed';
     })

var CurrentGTransformX = 0;
var CurrentGTransformY = 0;

group.selectAll('.not-fixed')
  .call(force.drag);

  // attach a different drag handler to the fixed node
var groupDrag = d3.behavior.drag()
  .on("drag", function(d) {
    // mouse pos offset by starting node pos
    var x = window.event.clientX - 420,
    y = window.event.clientY - 260;
    group.attr("transform", function(d) { return "translate(" + x + "," + y + ")"; });    
              //that was the line getting in conflict with the part in the end
    CurrentGTransformX = x;
    CurrentGTransformY = y;
  });

group.call(groupDrag);

force.on("tick", function() {
   node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
       .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); });

  link.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; });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

编辑：组的转换是限制最终获得其他数据而不是显示的原因。知道如何以正确的方式服务这两个功能吗？

4

0 回答 0