解释迈克·博斯托克的d3.js dragmove功能(Explaining Mike Bostock

我目前正试图建立在我的D3脚本可拖动的行为。 我在这里学习迈克·博斯托克的例子： 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相对于每个单元格。 因此，圆的边缘拖动时将穿过小区边界。

文章来源: Explaining Mike Bostock's d3.js dragmove function