育儿D3.js节点进行拖动 [英] Parenting D3.js-Nodes for dragging

问题描述

我有一个由节点和链接组成的网络.其中一个在中心处具有固定位置，但可以拖动，其他两个则处于围绕中部的力场中.如果用户拖动任何节点，则其他节点将被拖动到他的后面，因为链接.是否有可能以居中的节点拖动其他节点，但将其他节点的拖动事件保持为单一状态?

I have a network of nodes and links. One of them has a fixed position in the center but is draggable, the others are in a force field around the centered one. If the user drags any node, the others will be draged behind him, because the are linked. Is there a possibility to drag the others with the centered node, but keeping the drag-event of the other nodes single?

感谢您的思考， 大卫

thanks for thinking about it, David

如果有人知道有可能将所有其他节点的拖动侦听器设置为居中的，则问题将得到解决.如果您有一个主意，我将不胜感激！ 请给我留下评论，该代码的哪些部分可以帮助您解决此问题，我将尽快发布！

edit: if someone knew a possibility to set a dragg-listener for all the other nodes to the centered one, the problem would be solved. I'd be grateful if you had an idea! Please leave me a comment which parts of th ecode could help you solve this issue, and I'll post it asap!

edit:在nrabinowitz的帮助下，我现在可以按照自己的意愿移动节点！但是新的代码部分以某种方式使我的坐标限制崩溃了.为了不使节点脱离svg，我对所有节点都放置了cx/cy-attr，以防止它们越过svg的边界.这在开始时仍然有效，但是在中心节点(因此是"g"元素)的第一次拖动之后，限制似乎发生了变化.除了svg之外还有什么被拖拽的吗?

edit: with the help of nrabinowitz I can now move the nodes just as I wanted! But the new code-parts somehow crashed my coordinate-restrictions. For the nodes not to drop out of the svg, I put a cx/cy-attr to all nodes, preventing them from crossing the border of svg. This still works in the beginning, but after the first drag of the center-node (and therefore the 'g'-element) the restrictions seem to shift. Is there anything dragged except the svg?

脚本中提供限制的部分是

The part of the script providing the restriction is

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

推荐答案

请参阅工作提琴: http://jsfiddle.net/nrabinowitz/4Rj4z/

这会将节点封装在g元素中，并使用transform属性将其移动.

This encloses the nodes in a g element, and uses the transform attribute to move them around.

要使其正常工作，不能对要拉组的节点使用force.drag-您需要自定义d3.behavior.drag.不幸的是，根据此答案，您不能将拖动处理程序放在节点本身上-它必须在组中.这行得通，但是这意味着没有单独的拖动处理程序的其他元素-例如链接-也会拖动该组.您也许可以在组上使用pointer-events修复此问题.

In order to get this to work, you can't use force.drag for the node you want to have pull the group - you need a custom d3.behavior.drag. Unfortunately, per this answer, you can't put the drag handler on the node itself - it needs to be on the group. This works, but it means that other elements without a separate drag handler - e.g. links - will also drag the group. You might be able to fix this with pointer-events on the group.

这篇关于育儿D3.js节点进行拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！