javascript - 在d3js气泡图中拖动气泡

我正在查看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;
        }
    }

父圆实际上是一个矩形，该矩形的边框半径为50％，即400 * 400px，因此为198（边框为2px的200 px）。