javascript - 有没有办法让未链接的节点不以半径分布？

Question

注意:我将其从 Javascript 改编为 Typescript。一般来说，一切实际上都是 javascript。我在 Angular 上使用它，但我相信这超出了问题的范围。我添加了 [javascript] 标签，因为虽然这是 TS，但答案可以是 javascript 并进行改编。

编辑:我认为问题可能与收费有关。充电允许节点有一段时间自行设置，但我认为当它为-130时，与任何事物无关的节点都会被彻底推开，这是我不喜欢的。我想我可能需要找到一种方法来选择性地为节点充电，但我确实认为维持充电是有用的

在运行强制有向图时，我注意到一些有趣的事情。如果节点被链接起来，它就会在流体庄园中创建数据的良好有机表示。任何未链接的节点，它们只是围绕对象围成一圈，看起来等距，就好像所有节点都未链接一样。我遇到的问题之一是这个非链接圆的半径太大，以至于它位于视口(viewport)之外。是否有一种强制定向方法可以使此默认值成为更容易使用的东西，例如但不限于小半径或坐在链接对象的一侧。

无论哪种方式，我都希望让未链接的设备在视口(viewport)内重置，因为人们不一定知道缩小。

我还注意到，如果我重新绘制屏幕，​​节点有时会有一定的速度并缓慢地移出屏幕，随着网格刷新，这似乎是不正确的。我不知道为什么会发生这种情况。我认为模拟节点半径可能与以下代码或“ticker”变量有关:

this.simulation = d3.forceSimulation().force("charge", d3.forceMainBody().strength(FORCES.CHARGE));
this.simulation.on("tick", function(){ ticker.emit(this); });

或者甚至可能是力“中心”功能。

this.simulation.force('centers', d3.forceCenter(options.width /2, options.height /2));

我将链接一张显示发生情况(但缩小)的图片以及拓扑代码。

import { Link } from './link';
import { Node } from './node';
import * as d3 from 'd3';
import { EventEmitter } from '@angular/core';

const FORCES = {
    GRAVITY: 0.1,
    FRICTION: 0.9,
    CHARGE: -130,
    LINKDISTANCE: 50,
    LINKSTRENGTH: 0.2,
    CHARGEDISTANCE: Infinity,
    THETA: 0.8
};

export class ForceDirectedGraph {

    public ticker: EventEmitter<d3.Simulation<Node,Link>> = new EventEmitter<d3.Simulation<Node,Link>>();
    public simulation: d3.Simulation<any, any>;

    constructor(public nodes: Node[], public links: Link[], options: {width, height}){
        this.initSimulation(options);
    }

    initNodes() {
        if (!this.simulation) {
            throw new Error ('Simulation was noot Initialized.');
        }
        this.simulation.nodes(this.nodes);
    }
    initLinks() {
        if (!this.simulation) {
            throw new Error ('Simlulation was not Initialized');
        }
        this.simulation.force('links', d3.forceLink(this.links).strength(FORCES.LINKSTRENGTH));
    }

    initSimulation(options: any) {
        if (!options || !options.width || !options.height) {
            throw new Error("Missing Options On Initialize");
        }

        if (!this.simulation) {
            const ticker = this.ticker;
            this.simulation = d3.forceSimulation()
                .force("charge", d3.forceManyBody()
                    .strength(FORCES.CHARGE));
            this.simulation.on('tick', function() {
                ticker.emit(this);
            });
            this.initNodes();
            this.initLinks();
        }

        this.simulation.force('centers', d3.forceCenter(options.width / 2, options.height / 2))

        this.simulation.restart();
    }
}

Answer 1

您可以添加radial force并且仅将其应用于断开连接的节点。

this.simulation
    .force('radial', d3.forceRadial(Math.min(width, height) / 2 - 10)
    .strength(d => isConnected(d) ? 0 : 0.2))

其中 isConnected 是确定节点是否已连接的函数。