在 d3js bubblechart 中拖动气泡

Question

我正在看一个 d3js bubblechart 的例子。这是 link ：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 像素，边框为 2px）。

在 d3js bubblechart 中拖动气泡

Drag bubble in d3js bubblechart

javascript

bubble-chart

d3.js