Question

我试图在这里使用工具提示渲染饼图我得到了带有动态数据的饼图，所以如何在下面的代码中添加工具提示和这是工作片段https://codesandbox.io/s/react-d3-pie-chart-3q56e?file=/src/PieSVG.js，请检查

import React from "react";
import * as d3 from "d3";
import { prop } from "ramda";
import { number } from "prop-types";
var keys,dataset
const Arc = ({ data, index, createArc, colors, format }) => (
  <g key={index} className="arc">
    <path className="arc" d={createArc(data)} fill={colors(index)} />
    {
 dataset = [],
 dataset.push(data.data),
 console.log(dataset, 'key values'),
  keys = Object.keys(dataset[0]).filter(key => {
    if (typeof dataset[0][key] === 'number') {
        return dataset[0][key];
    }
  }),
  console.log(keys, 'keys'),
  console.log(data.data[keys[0]], 'keys nuber'),
  <text
    transform={`translate(${createArc.centroid(data)})`}
    textAnchor="middle"
    alignmentBaseline="middle"
    fill="white"
    fontSize="10"
  >
    {format(data.data[keys[0]])}
  </text>
    }
  </g>
);

const PieChartD3 = props => {
  // let val = props.data[0].find(key => typeof props.data[0][key] === 'number')
  
  keys = Object.keys(props.data[0]).filter(key => {
    if (typeof props.data[0][key] === 'number') {
        return key;
    }
  })
  // console.log(keys,'val keys')
 
  // keys = Object.keys(props.data[0])
  // console.log(keys, 'keys')

  const createPie = d3
    .pie()
    .value(d => d[keys[0]])
    .sort(null);
  const createArc = d3
    .arc()
    .innerRadius(props.innerRadius)
    .outerRadius(props.outerRadius);
  const colors = d3.scaleOrdinal(d3.schemeCategory10);
  const format = d3.format(".2f");
  const data = createPie(props.data);

  return (
    <svg width={props.width} height={props.height}>
      <g transform={`translate(${props.outerRadius} ${props.outerRadius})`}>
        {data.map((d, i) => (
          <Arc
            key={i}
            data={d}
            index={i}
            createArc={createArc}
            colors={colors}
            format={format}
          />
        ))}
      </g>
    </svg>
  );
};

export default PieChartD3;

这里然后我在另一个组件中调用这个函数，所以我在这里传递饼图的动态数据如何在圆弧悬停时添加此饼图的工具提示

import { number } from "prop-types";
import React from "react";
import PieChartD3 from "./pieChartd3";


function PieD3({data}) {   

  return (
      <div id="chart">
        <PieChartD3
          data={data}
          width={500}
          height={500}
          innerRadius={0}
          outerRadius={100}
        />
      </div>
  );
}

export default PieD3

在反应中使用 d3 在饼图悬停时添加工具提示

0 个答案: