在d3js气泡图中拖动气泡

莎莎111

我正在查看d3js bubblechart的示例。这是链接:http : //jsfiddle.net/49L6uj7s/

有人可以解释为什么198用于计算欧几里得距离吗:

var euclideanDistance = Math.sqrt(Math.pow((d.px - 198), 2) + Math.pow((d.py - 198), 2));
斯泰西·伯恩斯(Stacey Burns)

在示例中正在计算的欧几里得距离是您拖动的圆的中心与父容器之间的距离。

计算完成后,就可以将子圆保留在父圆内。

进行检查以查看拖动位置是否在父对象的外部,如果是,它将拖动对象的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在d3js气泡图中拖动气泡

来自分类Dev

使用 d3js 可点击气泡图中的四重层次结构

来自分类Dev

在d3js中创建矩形而不是气泡

来自分类Dev

使用 Javascript 数组生成气泡图 (D3js)

来自分类Dev

运动气泡图

来自分类Dev

如何实现只有完全缩放d3js才能单击气泡

来自分类Dev

使用外部json文件使用d3js创建气泡图

来自分类Dev

使用外部json文件使用d3js创建气泡图

来自分类Dev

csv的D3.js气泡图

来自分类Dev

如何在d3.js强制气泡图中添加标签

来自分类Dev

无法使用 d3.js 在气泡图中显示工具提示

来自分类Dev

更改c3.js的散点图中气泡大小

来自分类Dev

如何删除D3气泡图中的外圆

来自分类Dev

如何在D3气泡图中操纵圆?

来自分类Dev

D3气泡图/包装布局-如何使气泡从最大的气泡辐射到最小的气泡?

来自分类Dev

D3气泡图/包装布局-如何使气泡从最大的气泡辐射到最小的气泡?

来自分类Dev

实时滑动气泡/散点图的JavaScript库

来自分类Dev

如何在d3.js中更新气泡图?

来自分类Dev

d3.js集群气泡超过2600个节点

来自分类Dev

如何避免气泡图中的气泡重叠?

来自分类Dev

C3.js气泡图选择

来自分类Dev

d3鱼眼气泡图

来自分类Dev

D3 DataMaps:气泡上的OnClick事件传递了气泡属性

来自分类Dev

是否可以调整d3气泡图以获取分散位置而不是圆形包装的气泡?

来自分类Dev

在AngularJS中显示有关气泡图D3.js的信息

来自分类Dev

使用d3.js附加多个气泡云图表

来自分类Dev

AngularJS没有出现D3.js气泡图图

来自分类Dev

在AngularJS中显示有关气泡图D3.js的信息

来自分类Dev

d3js缩放+拖动导致冲突