javascript - 如何在 react-vis 中反转/下降/排序 x 轴数据

Question

我在文档中找不到这个。我想显示一个图表，其中 x 轴呈现日期和时间，左侧有最新数据。我曾希望只需反转数据属性数组就可以做到这一点，但 react-vis 库比这更聪明。

我还以为信息在this documentation page .

那么，如何对 x 轴降序排序？

代码示例

function ExampleGraph(props) {
  const {
    data,
    x, y,
  } = props

  // const keys = Object.keys(data)
  // if(keys.length>2){
  //   console.error({data}, "has too many dimensions for x-y")
  // }
  const keys=[x,y]

  const xyData = (()=> {
    const xKey = keys[0]
    const yKey = keys[1]

    const xArgs = data.map(r => (r[xKey]))
    const yArgs = data.map(r => (r[yKey]))

    const coords = xArgs.map((x, i) => ({
      x: x,
      y: yArgs[i] 
    }))

    return coords
  })()

  return (
    <XYPlot
    width={1000}
    height={640}>
      <HorizontalGridLines />
      <LineSeries
        data={xyData}
      />
      <XAxis />
      <YAxis />
    </XYPlot>
  )
}

呈现组件的 BlazeJS (MeteorJS) 模板

<template name="stepCountsGraph">
  <div>
    {{> React
      component=ExampleGraph
      data=stepCounts
      y="step_count"
      x="time"
    }}
  </div>
</template>

Answer 1

您应该能够通过指定 xDomain 来反转它! react-vis 接受每个维度的各种 Prop (例如 xDomain/xRange/xType 和 yDomain/yRange/yType)，因此如果您想控制图表的确切布局，您可以指定部分或全部这些属性。为了实现您所描述的反向域效果，您可以将片段修改为这样的

function ExampleGraph() {
const xKey = this.props.x;
const yKey = this.props.y;
const xyData = data.map(r => ({x: r[xKey], y: r[yKey]}));
const xDomain = data.reduce((res, row) => {
    return {max: Math.max(res.max, row[xKey]), min: Math.min(res.min, row[xKey])};
}, {min: Infinity, max: -Infinity});

return (
<XYPlot
    xDomain={[xDomain.max, xDomain.min]}
    width={1000}
    height={640}>
      <HorizontalGridLines />
      <LineSeries data={xyData} />
      <XAxis />
      <YAxis />
    </XYPlot>
   )
}

我希望这能回答您的问题!我已经打开一个问题以将此类说明添加到文档中 here .