Javascript 将数据放入d3中

您好，我有一个直线图，我应该显示动态数据，如果他们不给我传递数据，这只是一条直线

我的问题是，我不知道如何将道具传递给折线图

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;

---

我不太理解您的代码片段，但您可以使用与菜单相同的方式将数据传递给图表

<Chart data={data} />

---

然后在图表组件中，您将能够通过道具访问该数据。数据

我假设您的组件图表位于卡片组件中。首先，您正在这样做：

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

此外，在第一个数组对象中（在

plot

属性之前）缺少一个逗号

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

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

    ...

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

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