如何让 VictoryAxis tickValues 在 vi​​ctory-native 中均匀分布在轴上？

Question

我正在尝试制作一个看起来像 mercury 温度计的温度计。为此，我使用了 Formidable Lab 的 victory 本机库。

我 运行 遇到麻烦的地方是让 VictoryAxis 组件沿 y 轴均匀分布其 VictoryLabel 组件。

我在 componentDidMount 中的循环正在生成一个数字数组，以 0.2 为增量，在 this.state.cLower 和 this.state.cUpper 范围之间，应该设置为刻度标签在 y 轴上。

export default class Thermometer extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        temp: [0],
        cUpper: 29,
        cLower: 24,
        tickValues: []
      }
      DB.ref('tempLog').limitToLast(1).on('value', snap => {
        this.setState({ temp: [{ x: 0, y: [snap.val()[Object.keys(snap.val())[0]].temp] }], y0: this.state.cLower })
      })
    }
    componentDidMount () {
      let temps = new Set()
      for (let i = parseFloat(this.state.cLower); i <= parseFloat(this.state.cUpper); i += 0.2) {
        temps.add(Math.round(i * 10) / 10)
      }
      this.setState({ tickValues: Array.from(temps) })
    }

    render () {
      return (
        <VictoryChart
          height={300}
          width={65}>
          <VictoryAxis
            style={{ ticks: { size: 12 } }}
            orientation={'left'}
            tickValues={this.state.tickValues}
            dependentAxis />
          <VictoryBar
            style={{ data: { fill: 'rgb(255, 0, 0)' } }}
            data={this.state.temp} />
        </VictoryChart>
      )
    }
  }

我已验证呈现的值是正确的，但正如您在此处看到的那样，所有标签都几乎重叠呈现。

Answer 1

因为 this.state.cLower 和 this.state.cUpper 分别设置了下限和上限数据的边界，所以我必须将 VictoryBar 的 y0 属性设置为this.state.cLower

的值

<VictoryBar
 y0={() => this.state.cLower}
 style={{ data: { fill: 'rgb(255, 0, 0)' } }}
 data={this.state.temp} />

VictoryAxis 然后据推测是通过 VictoryChart 获取的，然后 VictoryAxis' VictoryLabel 得到分发，渲染的 VictoryBar 数据按预期对齐