4

我正在使用 VictoryVoronoiContainer 实现 VictoryLine 和 VictoryScatter 组合图表和 Victory-Charts以在鼠标悬停位置显示值。我需要在多个位置单击时使这些悬停细节保持不变。

仅悬停数据的示例：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/）来伪造它，但是使用 voronoidimension 悬停时很难看到这些点，并且单击时必须非常精确。另外，当有重叠时，您只会触发顶层的点击，因此重叠数据不会显示在持续存在的内容上。

有什么建议或想法吗？

来自 jsFiddle 的 VictoryScatter 事件代码（注意这不是我想要的），只有一个分散组件来保持简单：

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

编辑：这是另一个持久点的例子，但我需要找到一种方法来使标签持久化。 https://codesandbox.io/s/oq1w9xj8q6

4

0 回答 0