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

其次，除了d.xand之外d.y，您还需要设置d.pxand 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;
}

在这里完成演示。