Size: a a a

D3.js — русскоговорящее сообщество

2021 June 19

P

Psixolog in D3.js — русскоговорящее сообщество
Переслано от Psixolog
Привет всем,  ребята как сделать такой дизайн и график?
источник

P

Psixolog in D3.js — русскоговорящее сообщество
Ну только график
источник

AM

Anton Mizinov in D3.js — русскоговорящее сообщество
источник

P

Psixolog in D3.js — русскоговорящее сообщество
Пасибо,  добрый человек
источник
2021 June 22

А

Антон in D3.js — русскоговорящее сообщество
Добрый день, делаю карту на d3 (svg) и хочу отрисовывать на ней точки, например - все города, но когда точек много начинает тупить браузер, я пытаюсь отфильтровать точки относительно окна просмотра во время зума но не могу понять как это сделать с гео координатами, если кто подскажет буду признателен!
источник

AM

Anton Mizinov in D3.js — русскоговорящее сообщество
Если искать общее решение, то canvas будет работать быстрее чем svg. А насколько много у вас точек, порядок числа можете назвать?
источник

А

Антон in D3.js — русскоговорящее сообщество
на тесте делал около 3000 и уже подвисает интерфейс
источник

St

Stranger in the Q in D3.js — русскоговорящее сообщество
для фильтрации можно еще использовать какую-нибудь структуру данных типа https://github.com/d3/d3-quadtree
источник

А

Антон in D3.js — русскоговорящее сообщество
спасибо за ответы, я смотрел в сторону quadtree но застрял на моменте проверки находится ли моя координата в текущем окне bbox, тут подводит слабое знание d3 и svg в часности я не знаю как правильно реализовать функцию isInsideBoundingBox()

const bbox = svg.node().getBBox();

getIndicesToDraw = (data, bbox, transform) => {
   const indicesToDraw = [];
   const Q = d3.quadtree();
   for (let i = 0; i < data.length; i++) {
     const d = data[i];
     const p = this.getPointForDatum(d);

     if (isInsideBoundingBox(bbox, p, transform)) {
       Q.add(p);
       indicesToDraw.push(i);
     }
   }
   return indicesToDraw;
 };
источник

А

Антон in D3.js — русскоговорящее сообщество
пока что то такое написал но оно не работает

isInsideBoundingBox = (bbox, p, transform) => {
   const x = p[0];
   const y = p[1];

   const offsetX = Math.abs(bbox.x / transform.k);
   const offsetY = Math.abs(bbox.y / transform.k);

   if (x > offsetX && y > offsetY) {
     return true;
   } else return false;
 };
источник

NR

Nikita Rokotyan in D3.js — русскоговорящее сообщество
3 тыс точек для SVG не так, что бы очень много. Особенно, если делать зум через transform: translate контейнера.
Скорее всего проблема в другом, попробуйте измерить Performance в Dev Tools Хрома, там будет видно, что именно тормозит.

И getBBox медленная функция — она вызывает перерисовку элементов в браузере и тормозит исполнение дальнейшего кода.
источник

NR

Nikita Rokotyan in D3.js — русскоговорящее сообщество
В целом, для детальных карт, советую использовать MapboxGL или Tangram.
источник

А

Антон in D3.js — русскоговорящее сообщество
спасибо!
источник

NR

Nikita Rokotyan in D3.js — русскоговорящее сообщество
Рад помочь
источник

AM

Anton Mizinov in D3.js — русскоговорящее сообщество
Вроде не так много, особенно для статичных элементов.
источник

А

Антон in D3.js — русскоговорящее сообщество
там получается 3000 точек и 3000 названий этих точек и при зуме они все трансформируются, не сказать что прям виснет но работает ощутимо медленнее карта
источник

NR

Nikita Rokotyan in D3.js — русскоговорящее сообщество
Дело в тексте. Самый простой вариант — скрывать названия во время зума
источник

А

Антон in D3.js — русскоговорящее сообщество
Спасибо за совет, попробую сделать
источник

NR

Nikita Rokotyan in D3.js — русскоговорящее сообщество
Можно просто через атрибут .attr(‘visibility’, ‘hidden’) или через .style(‘display’, ‘none’), что бы из DOMа их не удалять. Тогда бразуер будет игнорировать эти элементы при рендере.
источник

А

Антон in D3.js — русскоговорящее сообщество
Интересно, я отрисовал все точки и подписи с style('display', 'none') и убрал трансформацию этих элементов при зуме. Но они по прежнему влиюят на скорость рендеринга и плавность самого зума
источник