Постоянные графики победы VictoryVoronoiContainer подсказки по нажатию - PullRequest
Новая
       5

Постоянные графики победы VictoryVoronoiContainer подсказки по нажатию

2 голосов
/ 19 марта 2019

Я реализую комбинацию диаграмм VictoryLine и VictoryScatter с диаграммами Victory-Charts, используя VictoryVoronoiContainer для отображения значений в месте наведения мыши. Мне нужно, чтобы эти детали при наведении сохранялись при нажатии в нескольких местах.

Пример только данных при наведении: https://formidable.com/open-source/victory/docs/victory-voronoi-container/

В частности, если пользователь щелкает, когда заданное всплывающее окно активно, в этом случае с использованием VoronoiDimension = 'x' детали всплывающего окна остаются видимыми в их координате X. В идеальном мире любое их количество будет видно.

Использование событий (https://formidable.com/open-source/victory/guides/events/). Я могу подделать его по щелчку точки разброса (https://jsfiddle.net/kn6v9357/3/)), но при наведении вороноидентификации трудно увидеть точки, и вы должны быть очень точными с Кроме того, при наличии перекрытия вы запускаете только щелчок по верхнему слою, поэтому перекрывающиеся данные не отображаются на том, что сохраняется.

Есть предложения или идеи?

Код для событий VictoryScatter из jsFiddle (обратите внимание, что это не делает то, что я хочу) только с компонентом scatter, чтобы упростить его: 

<VictoryChart
    containerComponent = { <VictoryVoronoiContainer 
      voronoiDimension="x" 
      //voronoiBlacklist={['Scatter0','Scatter1','Scatter2',]}
      labels={
        (d) => {
          return (
            `${d.market}: ${d.metric1}`
          )
        }
      }
    /> } 
  >
  <VictoryAxis 
    style = {{tickLabels: {fontSize: 8,angle: -15}}}
    label = 'Date'
  />
  <VictoryAxis dependentAxis 
    label = {this.state.metric === 'metric1' ? 'Metric 1' : 'Metric 2'}
    style = {{tickLabels: {fontSize: 8}, axisLabel: {padding: 40}}}
    axisLabelComponent = { <VictoryLabel style = {{fontSize: 12}} dx = {20} /> } 
  /> 
  { this.viewablePlaces.map((place, i) =>
      <VictoryGroup 
        animate = {{easing: "cubic",duration: 500,onLoad: {duration: 0}}}
        key = {place + String(i) + 'Group'}
        data = {this.get_data(place)}
        x = {(d) => moment(d.date).format('MMM YY')}
        y = {this.state.metric === 'metric1' ? 'metric1' : 'metric2'} 
      >
      <VictoryScatter
        key = {place + String(i) + 'Scatter'}
        name = {"Scatter"+i}
        style = {{  
          data: {fill: "#455A64",cursor: "pointer"},
          labels: {fontSize: 12,padding: 2}
        }}
        size = {2.5}
        labels={(d) => d.market + ': ' + String(d.metric2)}
        labelComponent = { 
          <VictoryTooltip
            orientation = {"top"}
            pointerLength = {5}
            pointerWidth = {3}
            cornerRadius = {3}
          />
        }
        events={[
          {
            target: "data",
            eventHandlers: {
              onMouseOver: (props) => {
                return [
                  {
                    target: "labels",
                    mutation: {active: true}
                  }
                ];
              },
              onMouseOut: (props) => {
                return [
                  {
                    target: "labels",
                    mutation: (props) => props.name === 'clicked' ? {name: 'clicked', active: true} : null
                  }
                ];
              },
              onClick: (props) => {
                return [
                  {
                    target: "data",
                    mutation: (props) => props.style.fill === 'orange' ?
                      null : {style: Object.assign({}, props.style, {fill: 'orange'}), size: 3.5}
                  },
                  {
                    target: "labels",
                    mutation: (props) => props.name === 'clicked' ?
                      null : {name: 'clicked', active: true}
                  }
                ];
              }
            }
          }
        ]}
      /> 
    </VictoryGroup>
  )}
  </VictoryChart>

Edit: Вот еще один пример с постоянными точками, но мне нужно найти способ также сделать ярлыки постоянными. https://codesandbox.io/s/oq1w9xj8q6

...