育儿D3.js节点拖动

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

感谢思考，大卫

编辑：如果有人知道的可能性来设置dragg侦听所有其他节点的中心之一，这个问题就迎刃而解了。如果您有想法，我会很感激！请留下我评论哪些部分的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; }); 
});

来源

2012-11-21 David

你的意思是拖拽非连接节点吗？或者一次拖拽连接的节点，而不是根据强制？你可以包含一些示例代码，或链接到JSFiddle？ – nrabinowitz

他们都在一个网络连接。更像是将任何节点单独移动它，让中央节点拖动整个网络，就好像网络本身是带有拖曳事件的对象一样！ – David

是否有可能在网络周围放置第二个svg或某种容器元素，以响应中央节点的拖动事件？ – David

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

这个封闭的节点在g元素，并使用transform属性移动它们。

为了得到这个工作，您不能使用force.drag作为您想要拉组的节点 - 您需要定制d3.behavior.drag。遗憾的是，根据this answer，您无法将拖放处理程序放在节点上 - 它需要放在组上。这可以工作，但这意味着其他元素没有单独的拖动处理程序 - 例如链接 - 也将拖动该组。您可以在组上使用pointer-events修复此问题。

来源

2013-01-24 00:52:55 nrabinowitz

非常感谢你，这看起来就像我一直在寻找的东西！ – David

它的工作完美，唯一的问题是它与我的边界框的东西冲突。为了防止元素浮出svg，我将节点的坐标限制在一个最终的force.on中（从你的例子中的第52行开始）。那就是我添加了一个node.attr（“cx”）/ cy的地方。但是现在我已经将你的想法包含在g元素和单独的处理程序中了，它已经不再适用了。这些限制似乎在拖拽后以未知的方式转移。如果我找到解决方案，我会发布它:) – David

育儿D3.js节点拖动

回答

相关问题