时间戳

首页 > 解决方案 > 将数据放入 d3 反应

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;

图表的数据是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;

标签： javascriptreactjsd3.js

解决方案

我假设您的组件 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

推荐阅读