[英]put data in d3 react
hello I have a line graph where I should show dynamic data and if they do not pass me data that is just a straight line.你好,我有一个折线图,我应该在其中显示动态数据,如果他们不传递给我的只是一条直线的数据。
The problem I have is that I don't know how to pass the props to the line graph我的问题是我不知道如何将道具传递给折线图
var data `[
{
"name": "Samantha White",
"id": "484567489sda",
"address": "4116 Barton Creek Boulevard Austin, TX 78735 USA",
"logo": "https://sssssss.s3.amazonaws.com/ssss/express.png",
"occupancy": {
"capacity": 150,
"occupancy": 0,
"percentage": 0
},
"alerts": {
"conglomerations": 0,
"occupancy": 0
},
"visits": 2721
"plot": []
},
{
"name": "Jacqueline Wells",
"id": "sdasdx45616a4dsa5",
"address": "s15035 Highview Road Grand Junction, CO 81504 USA",
"store_logo": "ssssss.s3.amazonaws.com/ssss/lider.png",
"occupancy": {
"capacity": 150,
"occupancy": 0,
"percentage": 0
},
"alerts": {
"conglomerations": 0,
"occupancy": 0
},
"visits": 2069,
"plot": [9, 29, 48, 52, 88, 107, 130, 127, 122, 157, 165, 172, 211, 214, 267, 296, 331, 353, 371, 381]
}
]`;
function App() {
const [tiendas, setTiendas] = useState(JSON.parse(data));
const [showTiendas, setShowTiendas] = useState(false)
useEffect(() => {
setTiendas(JSON.parse(data));
}, []);
return (
<div className="w-full ">
<Menu showTiendas={setShowTiendas} menuData={tiendas} tiendasSet={setTiendas} />
{showTiendas && tiendas.map((tienda) => (
<Card key={Math.random()} {...tienda}></Card>
))}
</div>
);
}
export default App;
The data of the graph would be plot
, within the card component I command to call the graph, this would be the code of the graph, I do not know how to send to call plot
from the graph, right now the graph has random numbers图形的数据将是
plot
,在卡片组件中我命令调用图形,这将是图形的代码,我不知道如何从图形发送调用plot
,现在图形有随机数
import React, { useState } from "react";
import { scaleLinear, scaleBand } from "d3-scale";
import Line from "./Line";
import { line, curveMonotoneX } from "d3-shape";
import { extent } from "d3-array";
function Chart(props) {
const [data, setData] = useState(
[
Math.random()*30,
Math.random()*30,
Math.random()*30,
Math.random()*30,
Math.random()*30,
Math.random()*30,
Math.random()*30,
]
);
const parentWidth = 125;
const margins = {
top: 20,
right: 20,
bottom: 20,
left: 20
};
const width = parentWidth - margins.left - margins.right;
const height = 75 - margins.top - margins.bottom;
const xScale = scaleBand()
.domain(data.map(d => d))
.rangeRound([0, width])
.padding(0.1);
const yScale = scaleLinear()
.domain(extent(data, d => d))
.range([height, 0])
.nice();
const lineGenerator = line()
.x(d => xScale(d))
.y(d => yScale(d))
.curve(curveMonotoneX);
return (
<div>
<svg
className="lineChartSvg"
width={width + margins.left + margins.right}
height={height + margins.top + margins.bottom}
>
<g transform={`translate(${margins.left}, ${margins.top})`}>
<Line
data={data}
xScale={xScale}
yScale={yScale}
lineGenerator={lineGenerator}
width={width}
height={height}
/>
</g>
</svg>
</div>
);
}
export default Chart;
I'm assuming that you component Chart is inside the Card component.我假设您的 Chart 组件位于 Card 组件内。 First, you are doing this:
首先,你正在这样做:
{showTiendas && tiendas.map((tienda) => (
<Card key={Math.random()} {...tienda}></Card>
))}
then, in the Card component you should have something like this:然后,在 Card 组件中你应该有这样的东西:
function Card(props) {
const { plot } = props;
...
return (
<Chart plot={plot}/> // you should pass the plot data to the Chart component like this
)
...
and finally, in the Chart component you should be able to get the data from props
just like this:最后,在 Chart 组件中,您应该能够像这样从
props
获取数据:
function Chart(props) {
const { plot } = props;
Also, you are missing a comma in the first array object (before the plot
attribute).此外,您在第一个数组对象(在
plot
属性之前)中缺少逗号。
I don't really understand your code snippets, but you could pass your data to Charts in the same way that menu is.我不太明白你的代码片段,但你可以像菜单一样将数据传递给图表。
<Chart data={data} />
Then within your Chart component you will be able to access that data via props.data然后在您的 Chart 组件中,您将能够通过 props.data 访问该数据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.