首页 > 解决方案 > 如何在 javascript 中向 d3.js 中的非连接对象添加力?

问题描述

如何向 d3.js 中的非连接对象添加力?

以下是 d3.js 中力有向图的演示

https://jsbin.com/bijoxozuno/edit?html,css,js,输出

这是强制代码:

    force.on("tick", function() {
      dataset.nodes.forEach((node, i) => {
        const circle = layer.findOne(".node-" + i);
        circle.x(node.x);
        circle.y(node.y);
      });
      dataset.edges.forEach((edge, i) => {
        const { target, source } = edge;
        const line = layer.findOne(".edge-" + i);
        line.points([target.x, target.y, source.x, source.y]);
      });
      layer.draw();
    });

想象一下,如果我有一些其他实体,例如单独的正方形或圆形,当与力连通图发生碰撞时;它应该相互作用(如吸引或排斥)。

我怎样才能做到这一点?

因为目前所有连接的节点都很好地交互(吸引和排斥)。但我需要进一步扩展与未连接到图形的其他第三方对象(如不同的圆形或正方形)的交互。但受到相同力量的影响。

注意我想要实现的只是我希望连接的节点与不属于连接图的对象进行交互......但受到相同力的影响。

以上例中的红色矩形为例

标签: javascriptd3.js

解决方案


推荐阅读