首页 > 解决方案 > Stardust.js 中的 D3.js 和 WebGL 交集

问题描述

我正在学习 stardust.js,并试图理解 stardust.js 中的力导向图。我知道 stardust 使用 d3.js 和 WebGL,但是当我查看代码时,我很难找到它们之间的桥梁。

在有向图中,d3.js 用于渲染创建 forceSimulation。

 var force = d3.forceSimulation()
        .force("link", d3.forceLink().id(function (d) {return d.index }))
        .force("charge", d3.forceManyBody())
        .force("forceX", d3.forceX(width / 2))  //for attracting element to a given point
        .force("forceY", d3.forceY(height / 2))


 force.nodes(nodes);
 force.force("link").links(edges);
 force.force("forceX").strength(0.5); //strength of aatraction
 force.force("forceY").strength(0.5);
 force.force("link").distance(50);
 force.force("link").strength(0.05);
 force.force("charge").strength(-40);

它正在向星尘提供数据

var positions = Stardust.array("Vector2")
        .value(d => [d.x, d.y])
        .data(nodes);

该位置用于更新

  force.on("tick", () => {
        if (isDragging && selectedNode && draggingLocation) {
            selectedNode.x = draggingLocation[0];
            selectedNode.y = draggingLocation[1];
        }
        positions.data(nodes);
        requestRender();
    });

我不明白这里有什么用武力,因为它没有在任何地方使用,只是被创造出来的。

我很想知道这是否只是为了让我们可以使用“tick”事件监听器来创建动画或运动或移动效果,因为它会更新发送到浏览器的位置?

任何形式的帮助表示赞赏!提前致谢

标签: javascriptd3.jswebgl

解决方案


推荐阅读