将数据放入 d3 反应

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

  };

Answer 1

我不太理解您的代码片段，但您可以按照与菜单相同的方式将数据传递到图表。<Chart&nbsp;data={data}&nbsp;/>然后在您的图表组件中，您将能够通过 props.data 访问该数据

Answer 2

我假设您的组件 Chart 位于 Card 组件内。首先，你正在这样做：{showTiendas && tiendas.map((tienda) => (&nbsp; &nbsp; <Card key={Math.random()} {...tienda}></Card>&nbsp;))}然后，在 Card 组件中你应该有这样的内容：function Card(props) {&nbsp; &nbsp; const { plot } = props;&nbsp; &nbsp; ...&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Chart plot={plot}/> // you should pass the plot data to the Chart component like this&nbsp; &nbsp; )&nbsp; &nbsp; ...最后，在图表组件中，您应该能够从中获取数据，props如下所示：function Chart(props) {&nbsp; &nbsp; const { plot } = props;&nbsp; &nbsp;&nbsp;此外，您在第一个数组对象（属性之前）中缺少逗号plot。