d3.js - 解释 Mike Bostock 的 d3.js dragmove 函数

Question

我目前正在尝试在我的 d3 脚本中创建可拖动的行为。我在这里学习 Mike Bostock 的例子：http: //bl.ocks.org/mbostock/1557377

这是有问题的功能：

function dragmove(d) {
  d3.select(this)
      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}

这似乎真的很混乱。

• 为什么使用这个 Math.max 和 Math.min 功能？

Answer 1

它被用来限制每个圆圈的拖动范围。

x 被限制在范围内[radius, width-radius]

y 被限制在范围内[radius, height-radius]

这些都在经过适当转换的 svgg元素内，因此 x 和 y 相对于每个单元格。因此，当拖动时，圆圈的边缘将穿过单元格边界。