Question

我正在浏览d3js bubblechart的一个例子。这是链接：http://jsfiddle.net/49L6uj7s/

有人可以解释为什么198用于计算euclideanDistance：

var euclideanDistance = Math.sqrt(Math.pow((d.px - 198), 2) + Math.pow((d.py - 198), 2));

Answer 1

示例中计算的欧氏距离是您要拖动的圆的中间与父容器之间的距离。

计算完成后，它用于将子圆圈保持在父圆圈内。

检查拖动位置是否在父项之外，如果是，则设置拖动对象的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 * 400像素，边界半径为50％的矩形，因此198（200像素，边界为2像素）。

在d3js bubblechart中拖动气泡

1 个答案: