如何在强制布局中拖动时将svg元素捕捉到网格答案

【问题标题】：How to snap svg element to grid while dragging in force layout如何在强制布局中拖动时将svg元素捕捉到网格
【发布时间】：2016-03-09 20:39:11
【问题描述】：

我有thisd3.js 强制布局，其中节点是带有相关文本的矩形。每当拖动节点时，位置都是固定的，就像在 mike 的 example 中一样。

我希望节点在拖动时捕捉到不可见的网格。使它们整齐排列。因此我将它添加到拖动事件中：

var grid = 50;
d3.select(this)
  .attr("x", function(d) { return Math.round(d3.event.x/grid)*grid; })
  .attr("y", function(d) { return Math.round(d3.event.y/grid)*grid; });

不知何故，这没有按预期工作。我想这与力布局的刻度功能有关。但我不确定，因此调用 force.stop()、force.start() 来查看是否有帮助。

我还尝试将矩形和文本嵌套在 g 元素中，并使用 transform(translate) 来定位节点。但也没有成功。

【问题讨论】：

标签： d3.js svg

【解决方案1】：

https://jsfiddle.net/e5fxojvm/

function dblclick(d) {
  d3.select(this).classed("fixed", d.fixed = false);
}

function dragstarted(d) {
  d3.select(this)
    .classed("fixed", d.fixed = true);
}

function dragged(d,i) {
  //force.stop();
  var grid = 50;

  var nx = Math.round(d3.event.x/grid)*grid;
  var ny = Math.round(d3.event.y/grid)*grid;

  d.px = nx;
  d.py = ny;
}

function dragended(d) {
  //force.start();
  console.log(this);
}

节点的坐标取自节点数组中每个数据点的 d.x 和 d.y，因此尽管您更新了屏幕上元素的 x 和 y 属性，但下一个刻度会将其重置为 d.x 和 d.y，从而产生很小的移动你在你的演示中看到（尽管在节点固定之后它不再移动）

您需要离散化节点位置数据 - d.x 和 d.y - 不仅仅是节点 DOM 元素的位置属性，而且对于固定节点来说不够直观，这似乎是通过 d.px 和 d.py - 前一个节点坐标来完成的。似乎刻度中的固定节点通过将它们设置为 d.px 和 d.py (https://github.com/mbostock/d3/blob/master/d3.js#L6299) 来计算 d.x 和 d.y？

【讨论】：