我试图在这里使用工具提示渲染饼图我得到了带有动态数据的饼图,所以如何向下面的代码添加工具提示 和工作片段在这里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;
这里然后我在另一个组件中调用这个函数,所以我在这里传递饼图的动态数据如何在圆弧悬停时添加此饼图的工具提示
从 "./pieChartd3" 导入 PieChartD3;
function PieD3({data}) {
return (
<div id="chart">
<PieChartD3
data={data}
width={500}
height={500}
innerRadius={0}
outerRadius={100}
/>
</div>
);
}
export default PieD3