Question

在 d3js 气泡图中拖动气泡

2015-10-27

548

javascript d3.js bubble-chart

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

有人能解释一下为什么用 198 来计算欧几里得距离吗：

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*400px 的矩形，边框半径为 50%，因此为 198（200 px，2px 边框）。