Увеличение в D3 визуализации, которая использует WebGL через stardustjs - PullRequest
Новая
       5

Увеличение в D3 визуализации, которая использует WebGL через stardustjs

0 голосов
/ 29 сентября 2018

В настоящее время я делаю визуализацию принудительной сети, которая включает большое количество узлов и ребер (более 50k +), используя новую библиотеку под названием stardust.js .Stardust использует WebGL для более быстрой визуализации узлов и ребер, чем Canvas / D3.

Однако я не могу понять, как добавить масштабирование и панорамирование к этой визуализации .

Согласно этой теме в группе google stardust , создатель библиотеки 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 в эту визуализацию, чтобы сделать ее масштабируемой и панорамирующей?

1 Ответ

0 голосов
/ 29 сентября 2018

Нет необходимости определять пользовательские метки (это можно сделать с помощью пользовательских меток).

Положение объектов контролируется с помощью 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, вы можете изменять масштаб и переводить.

Прикрепив зум к холсту, перетаскивание звездной пыли больше не работает.Но это другая проблема.

Я использовал пример https://stardustjs.github.io/examples/graph/

В обратном вызове масштабирования сохраните параметры масштабирования и запросите новый рендер графика. 

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();
...