reac +d3.js +TS 实现地理图 报错解决
1. 结构
结构请看之前的文章，这里记录部分报错解决的方式。能力受限无法解决d3-tip报错问题。
2. 报错
2.1 Property 'features' does not exis on type 'Feature<Point, GeoJsonProperties>'
let worldMeta = topojson.feature<GeoJsonProperties>(
data,
data.objects.countries
);
projection.fitSize([innerWidth, innerHeight], worldMeta as any);
g.selectAll("path")
.data(worldMeta.features)
解决方法
1: worldMeta类型设置为GeoJsonProperties
let worldMeta: GeoJsonProperties = topojson.feature<GeoJsonProperties>(
data,
data.objects.countries
);
projection.fitSize([innerWidth, innerHeight], worldMeta as any);
g.selectAll("path")
.data(worldMeta.features)
2: worldMeta类型设置为any
let worldMeta: any = topojson.feature<GeoJsonProperties>(
data,
data.objects.countries
);
projection.fitSize([innerWidth, innerHeight], worldMeta as any);
g.selectAll("path")
.data(worldMeta.features)
2.2 使用geoPath生成器为d属性赋值时报错
Type 'unknown' is not assignable to type 'ExtendedFeatureCollection<ExtendedFeature<Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon | GeometryCollection | GeoSphere | null, GeoJsonProperties>>'.
const projection = d3.geoNaturalEarth1();
const geo = d3.geoPath().projection(projection);
g.selectAll("path")
.data(worldMeta.features)
.enter()
.append("path")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("d", geo)
解决方法:
使用valueFn解决
attr(name: string, value: ValueFn<GElement, Datum, string | number | boolean | null>): this;
g.selectAll("path")
.data(worldMeta.features)
.enter()
.append("path")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("d", (data: any) => geo(data))
2.3 关于d3-tip报错 没有解决
d3-tip是d3.js社区的一个库，它将tip方法直接挂载到d3.js中的d3全局对象上，但是在react + ts环境下，不管调用d3-tip还是d3.tip都无法使用。
d3-tip中index.d.ts文件使用模块扩展语法，想要将tip()挂载到d3模块下。
import { Primitive } from "d3";
declare module "d3" {
type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se");
interface Tooltip {
hide(): Tooltip;
show(): Tooltip;
show<Datum>(data: Datum[]): Tooltip;
show(target: SVGElement): Tooltip;
show<Datum>(data: Datum[], target: SVGElement): Tooltip;
attr(name: string): string;
attr(name: string, value: Primitive): Tooltip;
attr<Datum>(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive): Tooltip;
attr<Datum>(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }): Tooltip;
style(name: string): string;
style(name: string, value: Primitive, priority?: string): Tooltip;
style<Datum>(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive, priority?: string): Tooltip;
style<Datum>(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }, priority?: string): Tooltip;
offset(): [number, number];
offset(tuple: [number, number]): Tooltip;
offset<Datum>(func: (datum: Datum, index: number, outerIndex: number) => [number, number]): Tooltip;
direction(): TooltipDirection;
direction(direction: TooltipDirection): Tooltip;
direction<Datum>(func: (datum: Datum, index: number, outerIndex: number) => TooltipDirection): Tooltip;
html(): string;
html(content: string): Tooltip;
html<Datum>(func: (datum: Datum, index: number, outerIndex: number) => string): Tooltip;
rootElement(): HTMLElement;
rootElement(element: HTMLElement): Tooltip;
rootElement<Datum>(func: (datum: Datum, index: number, outerIndex: number) => HTMLElement): Tooltip;
destroy(): Tooltip;
}
export function tip(): Tooltip;
}
3 完整代码
import React, { useRef, useEffect, useState } from "react";
import * as topojson from "topojson";
import { GeoJsonProperties, Feature } from "geojson";
import * as d3 from "d3";
import { svg } from "d3";
import "d3-tip";
import "../CSS/earth.css";
import "d3-tip";
const InteractionMap: React.FC = () => {
const ref = useRef<SVGSVGElement>(null);
const [width] = useState(1600);
const [height] = useState(800);
const [margin] = useState({
top: 60,
right: 60,
bottom: 10,
left: 60,
});
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
useEffect(() => {
const svgSelection = d3.select(ref.current);
svgSelection.attr("width", width).attr("height", height);
const g = svgSelection
.append("g")
.attr("id", "mainGroup")
.attr("transform", `translate(${margin.left},${margin.right})`);
const projection = d3.geoNaturalEarth1();
const geo = d3.geoPath().projection(projection);
// let tip: any = d3
// .tip()
// .attr("class", "d3-tip")
// .html((d: any) => d.properties.name);
// svgSelection.call(tip);
d3.json("./topoJson/countries-110m.json").then((data: any) => {
let worldMeta: GeoJsonProperties = topojson.feature<GeoJsonProperties>(
data,
data.objects.countries
);
projection.fitSize([innerWidth, innerHeight], worldMeta as any);
g.selectAll("path")
.data(worldMeta.features)
.enter()
.append("path")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("d", (data: any) => geo(data))
.on("mouseover", function (d) {
d3.select(this)
.attr("opacity", 0.5)
.attr("stroke", "white")
.attr("stroke-width", 6);
// tip.show(d);
})
.on("mouseout", function (d) {
d3.select(this)
.attr("opacity", 1)
.attr("stroke", "black")
.attr("stroke-width", 1);
});
});
});
return (
<>
<svg ref={ref}></svg>
</>
);
};
export { InteractionMap };
原文地址：https://www.cnblogs.com/xiaoxu-xmy/p/13764570.html
GitHub: https://github.com/lemon-Xu/Learning-d3.-Js
作者： lemon