Question

我尝试使用React使用d3js和打字稿创建饼图。我坚持使用this example。

我的数据具有以下格式：

const data: Data[] = [{name: "a", value: 5}, {name:"b", value: 3}, {name:"c", value: 2}];

这是我到目前为止得到的代码：

import React, {useLayoutEffect, useRef} from "react";
import * as d3 from "d3";

export type Data = { name: string; value: number; };
type PieChartProps = { size: number; data: Data[]; };

const PieChart: React.FC<PieChartProps> = ({size, data}) => {
    const ref = useRef<SVGSVGElement>(null);

    const pie = d3.pie<Data>().value(d => d.value);
    const arc = d3.arc<Data>().innerRadius(0).outerRadius(size / 2 - 1)
    const arcs = pie(data);

    useLayoutEffect(() => {
        const svg = d3.select(ref.current)
        svg.append("g")
            .selectAll("path")
            .data(arcs)
            .join("path")
            .attr("d", d => arc(d.data));
    });
    return <svg ref={ref} width={size} height={size}/>;
};

export default PieChart;

不幸的是，由于生成的svg没有有效路径，arc函数似乎无法正常工作。

<svg width="200" height="200">
    <g>
        <path d="MNaN,NaNLNaN,NaNZ"></path>
        <path d="MNaN,NaNLNaN,NaNZ"></path>
    </g>
</svg>

在我使用的示例中，他们创建了path元素（缩写为）：

svg.append("g")
    .selectAll("path")
    .data(arcs)
    .join("path")
    .attr("d", arc);

使用此方法，我得到了错误

Argument of type 'Arc<any, Data>' is not assignable to parameter of type 'ValueFn<Element | EnterElement | Document | Window | SVGPathElement | null, PieArcDatum<Data>, string | ... 2 more ... | null>'.
    Types of parameters 'd' and 'datum' are incompatible.
    Property 'name' is missing in type 'PieArcDatum<Data>' but required in type 'Data'.

我怀疑我在某些变量或函数的类型上做错了。 谁能告诉我，这里出了什么问题？

Answer 1

创建电弧生成器时，需要将其传递给饼生成器中数据所采用的形状。在这种情况下，这是用Data包装的PieArcDatum类型-

type Data = { name: string; value: number; }; // shape of your data
const pie = d3.pie<Data>().value(d => d.value); // expects type Data, returns type <PieArcDatum<Data>>[]
const arc = d3.arc<PieArcDatum<Data>>().innerRadius(0).outerRadius(size / 2 - 1); // expects type <PieArcDatum<Data>> and returns string

这将创建一个弧生成器，该弧生成器期望您将通过d3.select传递给它的结构中的数据。

d3js PieChart使用打字稿

1 个答案: