0

我有一个节点和链接网络。其中一个在中心有一个固定的位置，但可以拖动，其他的在围绕中心的一个力场中。如果用户拖动任何节点，其他节点将被拖到他身后，因为它们是链接的。是否有可能用居中的节点拖动其他节点，但保持其他节点的拖动事件单一？

谢谢你的考虑，大卫

编辑：如果有人知道将所有其他节点的拖动侦听器设置为居中的可能性，那么问题将得到解决。如果您有想法，我将不胜感激！请给我评论代码的哪些部分可以帮助您解决这个问题，我会尽快发布！

编辑：在 nrabinowitz 的帮助下，我现在可以随心所欲地移动节点了！但是新的代码部分以某种方式破坏了我的坐标限制。为了让节点不退出 svg，我给所有节点添加了一个 cx/cy-attr，防止它们越过 svg 的边界。这在开始时仍然有效，但是在第一次拖动中心节点（以及因此的“g”元素）之后，限制似乎发生了变化。除了svg，还有什么拖的吗？

提供限制的脚本部分是

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)); });
   node.attr("transform", function(d) { return "translate(" + d.x + "," + 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; });
});
4

1 回答 1

2

见工作小提琴：http: //jsfiddle.net/nrabinowitz/4Rj4z/

这将节点包含在一个g元素中，并使用该transform属性来移动它们。

为了让它工作，你不能使用force.drag你想要拉组的节点——你需要一个自定义的d3.behavior.drag. 不幸的是，根据这个答案，您不能将拖动处理程序放在节点本身上 - 它需要在组上。这可行，但这意味着没有单独的拖动处理程序的其他元素 - 例如链接 - 也将拖动组。您也许可以pointer-events在组上解决此问题。

于 2013-01-24T00:52:55.010 回答