解释 Mike Bostock 的 d3.js dragmove 函数答案

【问题标题】：Explaining Mike Bostock's d3.js dragmove function解释 Mike Bostock 的 d3.js dragmove 函数
【发布时间】：2013-02-21 18:31:39
【问题描述】：

我目前正在尝试在我的 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 功能？

【问题讨论】：

标签： d3.js draggable

【解决方案1】：

用于限制每个圆圈的拖动范围。

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

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

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

【讨论】：