Могу ли я импортировать любой 3D. js график для реагирования? - PullRequest
Новая
       10

Могу ли я импортировать любой 3D. js график для реагирования?

0 голосов
/ 18 февраля 2020

У меня есть несколько очень сложных (для промышленности) графиков, связанных с D3. js.

Эти графики должны быть интегрированы в веб-приложение. Я решил использовать ответ из-за его масштабируемости.

Приложение на данный момент состоит всего из 5 страниц. в будущем она может возрасти до 20.

Что мне делать?

1 Ответ

0 голосов
/ 18 февраля 2020

Существуют тонны постов в блогах, в которых рассказывается об интеграции D3 с React напрямую, но по своему опыту я обнаружил, что просто научиться напрямую использовать функции масштабирования D3, а затем рендерить ваши собственные элементы SVG, гораздо проще. следовать. Например, вот сравнительно простая диаграмма, в которой используется хорошая средняя часть React и D3: 

import {scaleTime} from "d3";

const width = 500;
const height = 300;
const date = [
  {date: new Date(2012,4,5), value: 5},
  {date: new Date(2013,3,2), value: 2},
  {date: new Date(2017,3,2), value: 7},
];

const MyChart = () => {
  const xScale = useMemo(() => {
    return scaleTime()
      .domain([new Date(2010,0,1), new Date(2020,0,1)])
      .range([0, width]);
  }, []);

  const yScale = useMemo(() => {
    return scaleLinear()
      .domain([0, 10])
      .domain([height, 0]);
  }, []);

return (
  <svg width={width} height={height}>
    <line className="x-axis" x1={0} x2={width} y1={yScale(0)} y1={yScale(0)} stroke="black" />
    {data.map((item, idx) => (
      <rect 
        key={idx}
        x={xScale(item.date) - 10}
        width={20}
        y={yScale(0)}
        height={yScale(item.value)}
        fill="blue"
      />
    ))}
  </svg>
)
}

Я набрал это по памяти, чтобы он на самом деле не работал, но в основном это должно быть рисование гистограммы с временная шкала как ось х. Использование d3 с vanilla js полезно, потому что оно может обрабатывать отслеживание точек данных и соответственно рисовать элементы svg, но такого рода задачи также являются одной из тех вещей, в которых хорошо работает React, и, на мой взгляд, их легче читать.

...