javascript - 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 有两个问题。首先，节点一旦被拖动就变得不可拖动——这是因为您在 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 .