реагировать - горизонтальные динамические метки c *. - PullRequest
Новая
       5

реагировать - горизонтальные динамические метки c *.

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

У меня много динамических c данных, которые имеют описательные точки данных, такие как цвет, текстура, температура, все со своими осями X, а также со своими собственными метками, возможно, стилем и т. Д. c. Я пытаюсь визуализировать множество различных HorizontalBarSeries, чтобы показать каждый столбец со своими xDomain в пределах одного и того же XYPlot, но я также хочу отображать динамические c метки на основе данных.

Здесь есть коды и коробка, которые еще не имеют ничего общего с ярлыками, но поиграться с: https://codesandbox.io/s/react-vis-onvalueclick-animation-test-1i1sd?fontsize=14&hidenavigation=1&theme=dark

это невозможно из-за того, что все это основано на svg ?

Вот примерный набросок того, что я после (не обращая внимания на стилизацию, в основном на динамические c метки и оси): enter image description here

Я в состоянии получить каждую серию рендеринга со своим собственным xDomain следующим образом. 

        <XYPlot
          width={300}
          height={300}
        >
          <HorizontalBarSeries data={data} xDomain={[0, 100]} />
          <HorizontalBarSeries data={data} xDomain={[0, 4]} />
          <HorizontalBarSeries data={data} xDomain={[0, 32000]} />
          <HorizontalBarSeries data={data} xDomain={[0, 100]} />
          <HorizontalBarSeries data={data} xDomain={[0, 50]} />
        </XYPlot>

, но я бы предпочел сделать что-то вроде этого: 

        <XYPlot
          width={300}
          height={300}
        >
          <div className="series-one">
            Label One
            <HorizontalBarSeries data={data} xDomain={[0, 100]} />
          </div>

          <div className="series-two">
            Label Two W/ Icon
            <img src="www.image.com" />
            <HorizontalBarSeries data={data} xDomain={[0, 4]} />
          </div>

          ...etc

        </XYPlot>

Проблема в том, что XYPlot компонент, кажется, ожидает, что его ближайшие дочерние элементы будут чем-то вроде Series или Axis, и т. д. c (react-vis компонент)

Я пытаюсь избежать рендеринга моего XYPlot для каждый бар, потому что это, кажется, побеждает всю цель использования библиотеки нравится. Это даже хорошая библиотека для моего варианта использования? Это единственный способ достичь моей цели? Должны ли я просто иметь метки в своем собственном столбце слева от серии, например? 

<div className="full-chart">
  <div className="labels>
    {labels.map(x => x)}
  </div>
  <XYPlot>
    {series.map(x => <HorizontalBarSeries data={x} />)}
  </XYPlot>
</div>

это разделение тоже не кажется идеальным.

Я открыт для смены библиотек с react-vis если это не может легко удовлетворить мои потребности, это все еще очень рано в разработке проекта.

Спасибо !!!

...