如何在react js中呈现多个'vis-react‘组件

Question

我想要渲染多个拓扑使用vis-react组件使用react js。

有什么建议如何进行吗？我正在使用ES6

Answer 1

如果您有一个要用其项填充图表数据的数组，则可以执行以下操作

    render() {
        let counter = 0;
        const items= this.props.data.map(item => {
            return (
                <XYPlot
                    width={300}
                    height={300}>
                    <HorizontalGridLines />
                    <LineSeries data={[item.data]}/>
                    <XAxis />
                    <YAxis />
                </XYPlot>
                )
            })

            return (
                <div>
                    {items}
                </div>
            )
        }

如果您有其他来源，则必须手动设置，如下所示：

  render() {
      return (
          <XYPlot key='1'
              width={300}
              height={300}>
                  <HorizontalGridLines />
                  <LineSeries
                      data={[
                        {x: 1, y: 10},
                        {x: 2, y: 5},
                        {x: 3, y: 15}
                      ]}/>
                  <XAxis />
                  <YAxis />
            </XYPlot>

            <XYPlot key = '2'
               width={300}
               height={300}>
               <HorizontalGridLines />
               <LineSeries
                   data={[
                      {x: 1, y: 10},
                      {x: 2, y: 5},
                      {x: 3, y: 15}
                   ]}/>
              <XAxis />
              <YAxis />
            </XYPlot>
            )
        }