D3: ошибка: <path>атрибут d: ожидаемое число, «MNaN, NaNLNaN, NaNL…» - PullRequest
Новая
       72

D3: ошибка: <path>атрибут d: ожидаемое число, «MNaN, NaNLNaN, NaNL…»

0 голосов
/ 22 апреля 2020

Я новичок в d3 и прогнозах. Я знаю, что есть другие вопросы с той же проблемой. Я пытался использовать их для решения своей проблемы, но мне это не удалось.

Я скопировал код с сайта d3 и немного его подправил, проблема все еще сохраняется, даже когда я пробовал разные комбинации .attr("d", path) как .attr("d", feature=>path(feature)

ошибка, которая отображается на консоли: Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". повторяется 232, количество записей в geo JSON.

Я использую React и импортирую модули d3 через npm

import * as d3 from "d3";
import { geoPath }from "d3-geo";
import { geoAitoff }from "d3-geo-projection";
...
async loadGeoJSON(){
            const data = await fetch("http://localhost:8080/world").then(res=>res.json());
            // const data = await d3.json("http://localhost:8080/world");
            this.setState({
                data
            });
    }

    async drawMap(projection, svg){
        // Load geoJSON data
        await this.loadGeoJSON();

        const { data } = this.state;

        const path = geoPath().projection(projection);
        svg.append("g")
            .selectAll("path")
            .data(this.state.data.features)
            .enter()
            .append("path")
            .attr("fill", "#69b3a2")
            .attr("d", path)
            .style("stroke", "#fff");

    }

    componentDidMount(){

        var svg = d3.select("#map");

        // Setup map projection
        var projection = geoAitoff()
            .scale(200)
            .translate([width / 2, height / 2]);


        this.drawMap(projection, svg);


    }

    render(){
        return(
        <div className="map-projection">
            <svg id="map">

            </svg>
        </div>
        );
    }

И запрашиваемый JSON выглядит следующим образом: 

"type":"Feature",
"properties":{
"scalerank":3,
"featurecla":"Admin-0 country",
"labelrank":5,
"sovereignt":"Netherlands",
...
},
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
-69.89912109375,
12.452001953124991
],
[
-69.89570312499998,
12.422998046874993
],
[
-69.94218749999999,
12.438525390624989
],
[
-70.004150390625,
12.50048828125
],
[
-70.06611328125,
12.546972656249991
],
[
-70.05087890624999,
12.597070312499994
],
[
-70.035107421875,
12.614111328124991
],
[
-69.97314453125,
12.567626953125
],
[
-69.91181640625,
12.48046875
],
[
-69.89912109375,
12.452001953124991
]
]
]
}
}

Заранее спасибо

...