Question

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

感谢您的思考，大卫

编辑：如果有人知道有可能为所有其他节点设置一个dragg-listener到中心节点，问题就会解决。如果你有一个想法，我将不胜感激！请留下评论哪个部分的ecode可以帮助你解决这个问题，我会尽快发布！

编辑：在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; });
});

Answer 1

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

这会将g元素中的节点括起来，并使用transform属性移动它们。

为了使其发挥作用，您无法将force.drag用于要拉取群组的节点 - 您需要自定义d3.behavior.drag。不幸的是，根据this answer，您不能将拖动处理程序放在节点本身上 - 它需要在组上。这有效，但这意味着其他元素没有单独的拖动处理程序 - 例如链接 - 也会拖动组。您可以使用pointer-events对该组进行修复。

育儿D3.js-用于拖动的节点

1 个答案: