將數據放入 d3 react

Question

你好，我有一個折線圖，我應該在其中顯示動態數據，如果他們不傳遞給我的只是一條直線的數據。

我的問題是我不知道如何將道具傳遞給折線圖

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;

圖形的數據將是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;

Answer 1

我假設您的 Chart 組件位於 Card 組件內。 首先，你正在這樣做：

{showTiendas && tiendas.map((tienda) => (
    <Card key={Math.random()} {...tienda}></Card> 
))}

然后，在 Card 組件中你應該有這樣的東西：

function Card(props) {
    const { plot } = props;

    ...

    return (
        <Chart plot={plot}/> // you should pass the plot data to the Chart component like this
    )
    ...

最后，在 Chart 組件中，您應該能夠像這樣從props獲取數據：

function Chart(props) {
    const { plot } = props;
    

此外，您在第一個數組對象（在plot屬性之前）中缺少逗號。

Answer 2

我不太明白你的代碼片段，但你可以像菜單一樣將數據傳遞給圖表。

<Chart data={data} />

然后在您的 Chart 組件中，您將能夠通過 props.data 訪問該數據