第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將數(shù)據(jù)放入 d3 反應(yīng)

將數(shù)據(jù)放入 d3 反應(yīng)

守著星空守著你 2023-07-20 16:24:44
你好,我有一個折線圖,我應(yīng)該在其中顯示動態(tài)數(shù)據(jù),如果他們不向我傳遞數(shù)據(jù),那只是一條直線。我遇到的問題是我不知道如何將道具傳遞給折線圖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;圖表的數(shù)據(jù)將是plot,在卡組件中我命令調(diào)用圖表,這將是圖表的代碼,我不知道如何從圖表發(fā)送調(diào)用plot,現(xiàn)在圖表有隨機(jī)數(shù)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  };
查看完整描述

2 回答

?
慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗 獲得超4個贊

我不太理解您的代碼片段,但您可以按照與菜單相同的方式將數(shù)據(jù)傳遞到圖表。

<Chart data={data} />

然后在您的圖表組件中,您將能夠通過 props.data 訪問該數(shù)據(jù)


查看完整回答
反對 回復(fù) 2023-07-20
?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗 獲得超4個贊

我假設(shè)您的組件 Chart 位于 Card 組件內(nèi)。首先,你正在這樣做:


{showTiendas && tiendas.map((tienda) => (

    <Card key={Math.random()} {...tienda}></Card> 

))}

然后,在 Card 組件中你應(yīng)該有這樣的內(nèi)容:


function Card(props) {

    const { plot } = props;


    ...


    return (

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

    )

    ...

最后,在圖表組件中,您應(yīng)該能夠從中獲取數(shù)據(jù),props如下所示:


function Chart(props) {

    const { plot } = props;

    

此外,您在第一個數(shù)組對象(屬性之前)中缺少逗號plot。


查看完整回答
反對 回復(fù) 2023-07-20
  • 2 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號