javascript - 通过stardustjs放大使用WebGL的D3可视化

我目前正在使用一个名为stardust.js的新库进行一个涉及大量节点和边缘(超过50k)的力网络可视化。 Stardust使用WebGL使节点和边缘的渲染比Canvas / D3快得多。

但是，我无法弄清楚如何向此visualization添加缩放和平移。

根据stardust's google group上的该线程，stardust库的创建者提到当前不支持缩放和平移，但是可以通过将缩放和平移规范设置为参数来设置标记规范来实现此功能。

import { Circle } from P2D;

mark MyMark(translateX: float, translateY: float, scale: float, x: float, y: float, radius: float) {
    Circle(Vector2(x * scale + translateX, y * scale + translateY), radius);
}
https://stackoverflow.com/editing-help
// In the js code you can do something like:
marks.attr("translateX", 10).attr("translateY", 15).attr("scale", 2);

该库使用一种Typescript语言，其中一个定义了“标记”(这是所有节点和边的含义)，并且应该可以通过上述参数来定义这些标记。但是如何实现呢？

有没有更简单的方法可以做到这一点？可以在此可视化上添加像Pixi.js这样的库来使其缩放和平移吗？

最佳答案

无需定义自定义标记(可以使用自定义标记来完成)。

对象的位置由Stardust.scale()控制。

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

var positionScale = Stardust.scale.custom("array(pos, value)")
    .attr("pos", "Vector2Array", positions)

通过修改value函数，您可以缩放和翻译。

通过将缩放比例附加到 Canvas 上，星尘拖动不再起作用。但这是一个不同的问题。

我使用了https://stardustjs.github.io/examples/graph/示例

在zoom回调中，保存zoom参数并请求图形的新渲染。

var fps = new FPS();

var zoom_scale = 1.0, zoom_t_x = 0.0, zoom_t_y = 0.0;

d3.select(canvas).call(d3.zoom().on("zoom", zoomed));
function zoomed() {
    zoom_scale = d3.event.transform.k;
    zoom_t_x = d3.event.transform.x;
    zoom_t_y = d3.event.transform.y;
    requestRender();
}

function render() {

    positions.value(d => [d.x*zoom_scale + zoom_t_x, d.y*zoom_scale + zoom_t_y]);

    ......
}

该示例包含一个错误。

使用滑块时，仿真不会停止，因为alphaTarget设置为0.3。

force.alphaTarget(0.3).restart();

它应该更改为

force.alpha(0.3).alphaTarget(0).restart();