时间戳

首页 > 解决方案 > 使用 D3 在饼图中添加数据

javascript - 使用 D3 在饼图中添加数据

问题描述

我有一个使用 d3 的应用程序。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import * as d3 from "d3";

import Pie from "./PieGraph";

import "./styles.css";

function App() {
  const [data, setData] = useState([
    {
      value: 25
    },
    {
      value: 59
    },
    {
      value: 77
    }
  ]);

  return (
    <div className="App">
      <h1>Pie Chart with React & D3</h1>
      <div></div>
      <div className="piechart">
        <Pie
          data={data}
          width={200}
          height={200}
          innerRadius={60}
          outerRadius={100}
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我想在数字附近的图表中添加其他数据，例如：

我现在拥有的代码在这里

问题：如何在图表内添加附近的数字，我上面描述的文字？

标签： javascriptd3.js

解决方案

假设你可以改变PieGraph.js自己，我会做以下事情：

  1. 更改Arc为接受带有 avalue和 a 的数据label

piegraph.js

const Arc = ({ data, index, createArc, colors, format }) => (
  <g key={index} className="arc">
    <path className="arc" d={createArc(data)} fill={colors(index)} />
    <text
      transform={`translate(${createArc.centroid(data)})`}
      textAnchor="middle"
      fill="white"
      fontSize="10"
    >
      // Here is the change
      {data.format !== undefined ? data.format : format(data.value)}
    </text>
  </g>
);
  1. 更改您传递给Pie

index.js

const [data, setData] = useState([
    {
      value: 25,
      label: '25 apples',
    },
    {
      value: 59,
      label: '',
    },
    {
      value: 77
    }
  ]);

现在，第一个有标签 '25 apples'，第二个没有标签，第三个有 label 77.00，情况已经如此。

推荐阅读