Как отрендерить несколько компонентов vis-react в react js
Я хочу визуализировать множественную топологию с использованием компонента vis-react, используя react js.
Есть предложения, как действовать?
Я использую ES6
Я хочу визуализировать несколько графов топологий, используя vis-react. Итак, как в цикле отображать эти компоненты один за другим.
Ответы 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>
)
}
На самом деле я хочу создать топологию графа, в которой одна сеть подключена к нескольким виртуальным машинам. у меня есть компонентный график, которому нужен пример: График {}
граф [узел: [{Vmname: 1, resource: "name1"}, {Vmname: 2, resource: "name2"}, {Vmname: 3, resource: "name3"}], ребра: [{from: 1, to: 2}, {from: 1, to: 3}, {from: 1, to: 4}]}
когда загружается график? вы хотите использовать вызов ajax для его заполнения или отправить его как опору для вашего компонента?
'vis-response' - это то же самое, что и другие компоненты реакции, которые вы можете использовать на той же странице и установить уникальный ключ для каждого из них, вы можете указать свой вопрос? в какой части у вас есть вопрос? Как вам лучше известно, вы можете найти много примеров на этом сайте 'uber.github.io/react-vis/examples/showcases/plots'