解释Mike Bostock的d3.js dragmove函数 [英] Explaining Mike Bostock's d3.js dragmove function

问题描述

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

I'm currently trying to create draggable behavior in my d3 script. I'm studying Mike Bostock's example here: 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功能？

推荐答案

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

It's being used to limit the drag range of each circle.

到 [radius，width-radius]

y的范围限制为 [radius，height-radius]

这些都在一个适当转换的svg g 元素，使得x和y是相对于每个单元格。因此，当拖动时，圆的边缘将跨越单元格边界。

These are all inside an appropriately transformed svg g element so that x and y are relative to each cell. Hence the edges of the circles will cross the cell boundary when dragged.

这篇关于解释Mike Bostock的d3.js dragmove函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！