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

Там вы 2 проблемы с вашей 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; 
} 

Полная демо-версия here.