Question

我正在使用 VictoryVoronoiContainer 在鼠标悬停位置显示值来实现带有Victory-Charts的VictoryLine和VictoryScatter组合图表。我需要使这些悬停详细信息在多个位置的单击中保持不变。

仅悬停数据的示例：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

持久性胜利图表VictoryVoronoi容器工具提示单击

0 个答案: