Как получить VictoryAxis tickValues, равномерно распределенные по оси в victory-native?

Question

Я пытаюсь сделать датчик температуры, похожий на ртутный термометр. Для этого я использую нативную библиотеку Formidable Lab.

Проблема, с которой я сталкиваюсь, заключается в том, чтобы компонент VictoryAxis равномерно распределил свои компоненты VictoryLabel вдоль оси y.

Мой цикл в 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 's y0 prop в значение this.state.cLower

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

VictoryAxis затем принимает это, предположительно через VictoryChart, и VictoryAxis 'VictoryLabel s распределяется, и визуализированные VictoryBar данные выровнены, как ожидалось