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

其次，除了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;
}