使用 d3.geoPath(projection) 似乎没有将正确的属性“d”添加到“路径”

Question

我正在尝试为一个项目创建一张美国地图。为此，我使用d3.geoAlbersUsa()as 投影和d3.geoPath(projection)as 路径函数。但是，当将“路径”附加到我的 svg 时，似乎没有设置“d”属性。

// Projection from geoAlbersUsa

let projection = d3.geoAlbersUsa()

                    .translate(width/2,height/2)

                    .scale(10000);

// Path from geoPath with the previous projection

let path = d3.geoPath().projection(projection);

let svg = d3.select("#svg");

// Load in csv and json data

d3.csv("state_results.csv", data => {

  d3.json("states.json", json => {

    // Process data from csv file and json file

    ...

    ...

    ...

    // Selecting 'g' element in svg and appending 'path'

    d3.select("#map").selectAll("path")

                .data(json.features)

                .enter()

                .append("path")

                .attr("d", path)

                .style("fill", d => {

                    return d.properties.party;

                });

当我启动我的服务器时，这是我检查 svg 元素时显示的内容：

关于为什么"d"没有在每个路径中正确设置属性的任何想法？

下面是数组中的一个元素json.features： {"type":"Feature","id":"49","properties":{"name":"Utah","density":34.30},"geometry":{"type":"Polygon","coordinates":[[[-112.164359,41.995232],[-111.047063,42.000709],[-111.047063,40.998429],[-109.04798,40.998429],[-109.053457,39.125316],[-109.058934,38.27639],[-109.042503,38.166851],[-109.042503,37.000263],[-110.499369,37.00574],[-114.048427,37.000263],[-114.04295,41.995232],[-112.164359,41.995232]]]}},

javascript网页格式svgd3.js小路

Answer 1

我已经使它与您提供的示例数据一起使用。您需要将 中的数字括起来.translate([width / 2, height / 2])。除此之外，我只需要将比例缩小一点以使其适合屏幕。const jsonFeatures = [{&nbsp; "type": "Feature",&nbsp; "id": "49",&nbsp; "properties": {&nbsp; &nbsp; "name": "Utah",&nbsp; &nbsp; "density": 34.30&nbsp; },&nbsp; "geometry": {&nbsp; &nbsp; "type": "Polygon",&nbsp; &nbsp; "coordinates": [&nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; [-112.164359, 41.995232],&nbsp; &nbsp; &nbsp; &nbsp; [-111.047063, 42.000709],&nbsp; &nbsp; &nbsp; &nbsp; [-111.047063, 40.998429],&nbsp; &nbsp; &nbsp; &nbsp; [-109.04798, 40.998429],&nbsp; &nbsp; &nbsp; &nbsp; [-109.053457, 39.125316],&nbsp; &nbsp; &nbsp; &nbsp; [-109.058934, 38.27639],&nbsp; &nbsp; &nbsp; &nbsp; [-109.042503, 38.166851],&nbsp; &nbsp; &nbsp; &nbsp; [-109.042503, 37.000263],&nbsp; &nbsp; &nbsp; &nbsp; [-110.499369, 37.00574],&nbsp; &nbsp; &nbsp; &nbsp; [-114.048427, 37.000263],&nbsp; &nbsp; &nbsp; &nbsp; [-114.04295, 41.995232],&nbsp; &nbsp; &nbsp; &nbsp; [-112.164359, 41.995232]&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; ]&nbsp; }}];let width = 500,&nbsp; height = 300;// Projection from geoAlbersUsalet projection = d3.geoAlbersUsa()&nbsp; .translate([width / 2, height / 2])&nbsp; .scale(1000);// Path from geoPath with the previous projectionlet path = d3.geoPath().projection(projection);let svg = d3.select("svg").attr("width", width).attr("height", height);svg.selectAll("path")&nbsp; .data(jsonFeatures)&nbsp; .enter()&nbsp; .append("path")&nbsp; .attr("d", path)&nbsp; .style("fill", d => {&nbsp; &nbsp; return d.properties.party;&nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script><svg></svg>