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 个问题。首先，节点一旦被拖动就变得不可拖动——这是因为您在 dragend 上设置了 d.fixed = true。这可以防止任何进一步的位置变化。解决方案是在 dragstart.

上设置 d.fixed = false

其次，除了d.x和d.y，还需要设置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;
}

完成演示 here。

d3 强制布局在拖动时对齐网格

d3 force layout snap to grid on drag

javascript

d3.js

snapping