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解決策はonに設定することdragstartです。

次に、 と に加えてd.x、位置の変更を有効にするためにと(フォース レイアウトが内部で使用する)d.yを設定する必要があります。d.pxd.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;
}

完全なデモはこちら.