Nivo 饼图未呈现

Question

I'm using the nivo charting library and am struggling to get my pie charts to render. I really don't understand why the pie chart isn't showing up.

Here is my core component code for the dashboard:

 import React, { useState, useEffect } from "react"; import Amplify, { Storage } from "aws-amplify"; import Paper from "@material-ui/core/Paper"; import Box from "@material-ui/core/Box"; import Grid from "@material-ui/core/Grid"; import awsmobile from "./aws-exports"; import * as d3 from "d3"; import CircularProgress from "@material-ui/core/CircularProgress"; import MyResponsivePie from "./pieConfig"; import useStyles from "./useStyles"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from "@material-ui/core/Toolbar"; import IconButton from "@material-ui/core/IconButton"; import CloudDownloadIcon from "@material-ui/icons/CloudDownload"; import Typography from "@material-ui/core/Typography"; Amplify.configure(awsmobile); Storage.configure({ level: "private" }); export default function Dashboard() { useEffect(() => { getFile(); }, []); const classes = useStyles(); const [dashboard, showDashboard] = useState(false); const [dashboardfile, setFile] = useState(); const getFile = async () => { const url = await get_url().catch(err => getFile()); const file = await d3.csv(url); if (file) { console.log(file); setFile(file); showDashboard(true); } }; const get_url = () => { var url = Storage.get("output.csv", { level: "private" }, { expires: 60 }); console.log(url); return url; }; const countColumnValues = (file, column) => { var data_count = d3 .nest() .key(function(d) { return d[column]; }) .rollup(function(leaves) { return leaves.length; }) .entries(file); console.log(data_count); return data_count; }; const generatePie = (file, column) => { var data = countColumnValues(file, column); return data; }; return ( <Box className={classes.root}> <AppBar position="static"> <Toolbar> <IconButton edge="start" className={classes.menuButton} color="inherit" > <CloudDownloadIcon onClick={get_url}></CloudDownloadIcon> </IconButton> <Typography variant="h6" className={classes.title}> Atreides Controls NLP Dashboard </Typography> </Toolbar> </AppBar> {dashboard === false && ( <div className={classes.circle}> <CircularProgress /> </div> )} {dashboard && ( <div className={classes.root}> <Grid container direction="row" space={3}> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="contains_who_pie" data={generatePie(dashboardfile, "contains_whos")} />{" "} </div> </Paper> </Grid> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="contains_what_pie" data={generatePie(dashboardfile, "contains_whats")} /> </div> </Paper> </Grid> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="contains_how_pie" data={generatePie(dashboardfile, "contains_hows")} /> </div> </Paper> </Grid> </Grid> <Grid container direction="row" space={3}> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="multiple_who_pie" data={generatePie(dashboardfile, "multiple_whos")} /> </div> </Paper> </Grid> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="multiple_what_pie" data={generatePie(dashboardfile, "multiple_whats")} />{" "} </div> </Paper> </Grid> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="multiple_how_pie" data={generatePie(dashboardfile, "multiple_hows")} /> </div> </Paper> </Grid> </Grid> <Grid container direction="row" space={3}> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="risk_relevance_pie" data={generatePie( dashboardfile, "control_relevance_to_risk" )} /> </div> </Paper> </Grid> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="automated_manual_pie" data={generatePie(dashboardfile, "")} /> </div> </Paper> </Grid> <Grid item xs> <Paper className={classes.paper}> <div className={classes.pie}> <MyResponsivePie id="preventative_detective_pie" data={generatePie(dashboardfile, "")} /> </div> </Paper> </Grid> </Grid> </div> )} </Box> ); }

The pie chart component is configured using this component that I am importing:

 import React from "react"; import { ResponsivePie } from "@nivo/pie"; const MyResponsivePie = ({ data }) => ( <ResponsivePie data={data} margin={{ top: 40, right: 80, bottom: 80, left: 80 }} startAngle={-180} innerRadius={0.5} padAngle={0.7} cornerRadius={3} colors={{ scheme: "nivo" }} borderWidth={1} borderColor={{ theme: "grid.line.stroke" }} radialLabelsSkipAngle={10} radialLabelsTextXOffset={6} radialLabelsTextColor="#333333" radialLabelsLinkOffset={0} radialLabelsLinkDiagonalLength={16} radialLabelsLinkHorizontalLength={24} radialLabelsLinkStrokeWidth={3} radialLabelsLinkColor={{ from: "color", modifiers: [] }} slicesLabelsSkipAngle={10} slicesLabelsTextColor="#333333" animate={true} motionStiffness={90} motionDamping={15} legends={[ { anchor: "bottom", direction: "row", translateY: 56, itemWidth: 100, itemHeight: 18, itemTextColor: "#999", symbolSize: 18, symbolShape: "circle", effects: [ { on: "hover", style: { itemTextColor: "#000" } } ] } ]} /> ); export default MyResponsivePie;

and my styles file looks like this

 import { green } from "@material-ui/core/colors"; import { makeStyles } from "@material-ui/core/styles"; import { forceCenter } from "d3"; const useStyles = makeStyles(theme => ({ root: { height: "100vh" }, success: { backgroundColor: green[600] }, error: { backgroundColor: theme.palette.error.dark }, icon: { fontSize: 20 }, iconVariant: { opacity: 0.9, marginRight: theme.spacing(1) }, message: { display: "flex", alignItems: "center" }, image: { backgroundImage: "url(https://source.unsplash.com/8WFnEehJWso)", backgroundRepeat: "no-repeat", backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[900] : theme.palette.grey[50], backgroundSize: "cover", backgroundPosition: "center" }, paper: { margin: theme.spacing(1.5, 3), display: "flex", flexDirection: "column", alignItems: "center" }, form: { width: "100%", // Fix IE 11 issue. marginTop: theme.spacing(1) }, submit: { margin: theme.spacing(3, 0, 2) }, card: { maxWidth: 600 }, media: { height: 500 }, circle: { display: "flex", "& > * + *": { marginLeft: theme.spacing(2) } }, menuButton: { marginRight: theme.spacing(2) }, title: { flexGrow: 1, alignContent: "center" }, pie: { height: 250 } })); export default useStyles;

Lastly an example of my data that is coming back from the generate pie function is like this:

 [ {key: "True", value: 7981}, {key: "False", value: 950} ]

Answer 1

我遇到的问题相当愚蠢，容器对象没有指定大小。