d3强制布局在拖动时捕捉到网格

Question

在d3中完成拖动后如何捕捉网格？

我尝试将一个事件监听器添加到dragend事件并舍入值，但它似乎不起作用：

force.drag()
    .on('dragend', function(d) {
        d.fixed = false;
        d.x = Math.round(d.x / 10) * 10;
        d.y = Math.round(d.y / 10) * 10;
    });

http://jsfiddle.net/zc89zj9e/

Answer 1

你的jsfiddle有2个问题。 首先，节点成为undraggable一旦被拖到-这是因为你设置d.fixed = true上dragend 。 这可以防止进一步的位置变化。 解决方案是在dragstart上设置d.fixed = false 。

其次，除了dx和dy ，还需要设置d.px和d.py （强制布局在内部使用）以使位置更改生效。

function dragstarted(d) {
  // ...
  d.fixed = false;
}

function dragended(d) {
  d.fixed = true;
  d.x = d.px = Math.round(d.x / 100) * 100;
  d.y = d.py = Math.round(d.y / 100) * 100;
}

在这里完成演示。