reactjs - VictoryAxis tickValues を勝利ネイティブの軸に均等に分散させる方法は?

Question

水銀温度計のような温度計を作ってみました。これを行うために、私は Formidable Lab の Victory ネイティブ ライブラリを使用しています。

問題が発生しているのは、VictoryAxisコンポーネントをVictoryLabely 軸に沿ってコンポーネントを均等に分散させることです。

私のループインは、y 軸の目盛りラベルとして設定される とのcomponentDidMount範囲の間で、0.2 の増分で数値の配列を生成しています。this.state.cLowerthis.state.cUpper

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

レンダリングされた値が正しいことを確認しましたが、ここでわかるように、すべてのラベルがほぼ重なり合ってレンダリングされます。