我正在查看d3js bubblechart的示例。这是链接:http : //jsfiddle.net/49L6uj7s/
有人可以解释为什么198用于计算欧几里得距离吗:
var euclideanDistance = Math.sqrt(Math.pow((d.px - 198), 2) + Math.pow((d.py - 198), 2));
在示例中正在计算的欧几里得距离是您拖动的圆的中心与父容器之间的距离。
计算完成后,就可以将子圆保留在父圆内。
进行检查以查看拖动位置是否在父对象的外部,如果是,它将拖动对象的x和y设置在父对象的边缘:
function dragmove(d) {
var euclideanDistance = Math.sqrt(Math.pow((d.px - 198), 2) + Math.pow((d.py - 198), 2));
if(euclideanDistance > 198 - d.radius){
d.px = d.px - 198;
d.py = d.py - 198;
var radians = Math.atan2(d.py, d.px);
d.px = Math.cos(radians) * (198 - d.radius) + 198;
d.py = Math.sin(radians) * (198 - d.radius) + 198;
}
}
父圆实际上是一个矩形,即400 * 400px,边界半径为50%,因此为198(200px,边界为2px)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句