如何在 react-vis 中 reverse/descend/sort x 轴数据

Question

我在文档中找不到这个。我想显示一个 X 轴渲染日期和时间的图表，左侧是 最近的 数据。我曾希望只反转数据属性数组就可以做到，但 react-vis 库比这更聪明。

那么，我如何对 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 接受每个维度的各种属性（例如 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.

如何在 react-vis 中 reverse/descend/sort x 轴数据

How to reverse/descend/sort x-axis data in react-vis

javascript

d3.js

reactjs

react-vis