Схема форсирования D3 в Canvas: добавление и обновление узлов (и ссылок) - PullRequest
Новая
       7

Схема форсирования D3 в Canvas: добавление и обновление узлов (и ссылок)

0 голосов
/ 30 апреля 2018

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

Одной из функций, для которых мне нужно кодировать, является добавление новых узлов и ссылок в существующий график (без обновления), а также новых ссылок. Есть ли какой-нибудь взлом, который можно сделать, чтобы сделать это? Поскольку у canvas нет структуры DOM, такой как SVG, я могу выбирать и обновлять ...

Я ссылаюсь на этот холст форс-макет создания с использованием d3v4. https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048

Спасибо!

1 Ответ

0 голосов
/ 30 апреля 2018

Есть действительно хороший пост, который кто-то собрал об использовании canvas, под названием Работа с D3.js и Canvas .

Короче говоря, я бы порекомендовал сделать привязку данных к некоторому фиктивному HTML и использовать результаты этого для визуализации вашего вывода.

Сначала создайте поддельный элемент DOM, который вы можете использовать 

const fakeContainer = d3.select(document.createElement("custom"));

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

const join = fakeContainer
        .selectAll("circle")
        .data(myData);

join.exit().remove();
join.enter().append("circle");

Тогда, когда дело доходит до рендеринга: 

fakeContainer.each(function(d) {
    // Render a canvas circle
});
...