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

我在查阅文档时没有找到这个。我想显示一个带有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>
  )
}

函数示例图（道具）{
常数{
数据，
x、 y,，
}=道具
//常量键=对象键（数据）
//如果（键长度>2）{
//错误（{data}，“x-y的维度太多”）
// }
常量键=[x，y]
常数xyData=（（）=>{
常数xKey=键[0]
常数yKey=键[1]
const xArgs=data.map（r=>（r[xKey]））
constyargs=data.map（r=>（r[yKey]））
常量坐标=xArgs.map（（x，i）=>({
x:x，
y:yArgs[i]
}))
回程坐标
})()
返回(
)
}

渲染组件的BlazeJS（MeteorJS）模板

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

{{>反应
组件=示例图
数据=步数
y=“步数”
x=“时间”
}}

您应该能够通过指定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>
   )
}

函数ExampleGraph（）{
const xKey=this.props.x；
constykey=this.props.y；
constxydata=data.map（r=>（{x:r[xKey]，y:r[yKey]}））；
常量xDomain=data.reduce（（分辨率，行）=>{
返回{max:Math.max（res.max，row[xKey]），min:Math.min（res.min，row[xKey]）；
}，{min:Infinity，max:-Infinity}）；
返回(
)
}

---

我希望这能回答你的问题！我打开了一个问题，将这种澄清添加到文档中。

一点代码将更容易给出具体的答案。但一般来说，使用d3可以反转

刻度的
范围
。例如，您定义的范围不是
[0，宽度]
，而是
[width，0]
。这将反向映射域。@Mark_M这是我的代码片段，我实际上是在blaze中使用React组件进行此演示。我认为答案将取决于react-vis库的功能，而不仅仅是d3.js的知识。您能看看类似的问题吗。我的Y范围是[199740200400]，我只是得到了一堵没有相对差异的钢筋墙，因为与[0200400]的Y范围相比，所有东西都在缩放。