解释Mike Bostock的d3.js拖拉机功能

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]

范围

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