Привет всем,  ребята как сделать такой дизайн и график?

Ну только график

Пасибо,  добрый человек

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

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

на тесте делал около 3000 и уже подвисает интерфейс

для фильтрации можно еще использовать какую-нибудь структуру данных типа https://github.com/d3/d3-quadtree

спасибо за ответы, я смотрел в сторону 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;
 };

пока что то такое написал но оно не работает

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;
 };

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

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

В целом, для детальных карт, советую использовать MapboxGL или Tangram.

спасибо!

Рад помочь

Вроде не так много, особенно для статичных элементов.

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

Дело в тексте. Самый простой вариант — скрывать названия во время зума

Спасибо за совет, попробую сделать

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

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