1

我无法在文档中找到这个。我想显示一个图表，其中 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>
4

1 回答 1

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

我希望这能回答你的问题！我已经打开了一个问题，将这种类型的说明添加到此处的文档中。

于 2017-08-04T19:03:22.983 回答