放Projection_Transform香水

Question

我在 translate(${projection([longitude, latitude]).join(",")}) 行中得到了 Uncaught TypeError: Cannot read property 'join' of null。我已经检查过我的 var locations 中有数据：

所以，无法理解问题出在哪里？

完整的 js 代码：

import * as d3 from "d3";
import * as topojson from "topojson-client";
import us from "./us.json";
import data from "./wm.json"; 

const width = 975;
const height = 610;

const projection = d3
  .geoAlbersUsa()
  .scale(1300)
  .translate(width / 2, height / 2);

const path = d3.geoPath();
const svg = d3.create("svg").attr("height", height).attr("width", width);

const worldMap = svg
  .append("path")
  .attr("fill", "#ddd")
  .attr("d", path(topojson.feature(us, us.objects.nation)));

const worldBorders = svg
  .append("path")
  .attr("fill", "none")
  .attr("stroke", "#fff")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("d", path(topojson.feature(us, us.objects.states)));

const locations = svg
  .selectAll("g")
  .attr("text-anchor", "middle")
  .attr("font-family", "sans-serif")
  .attr("font-size", 10)
  .data(data)
  .join("g");
console.log(locations);
const locationGroups = locations
  .append("g")
  .attr(
    "transform",
    ({ longitude, latitude }) =>
      `translate(${projection([longitude, latitude]).join(",")})`
  );

document.body.appendChild(svg.node());

console.log(us.objects) 的输出具有 states 和 nation 的类型和几何：

Answer 1

您的 topojson API 需要定义类型和几何图形。然后，您可以在投影中使用此数据。

我的典型设置如下所示：

    const mapShapes = topojson.feature(map, {
        type: 'GeometryCollection',
        geometries: data.objects.map_object.geometries
    })

    

    //projection

    const projection = d3.geoAlbersUsa()
    .fitExtent([[20,20],[460,500]], mapShapes)

然后你运行通过D3地理路径方法投影：

//path
    const path = d3.geoPath()
    .projection(projection)

那么这个路径就可以用来绘制d属性中的路径了

注意：典型的 topojson 文件中的 map_object 是从源下载文件时的文件名。

Answer 2

问题出在范围变量 projection:

const projection = d3
  .geoAlbersUsa()
  .scale(1300)
  .translate(width / 2, height / 2);

我检查了 console.log(projection(-86.300568, 32.377716))，输出是 null。所以我改变了

`translate(${projection([longitude, latitude]).join(",")})`

至

`translate(${d3
      .geoAlbersUsa()
      .scale(1300)
      .translate([width / 2, height / 2])([longitude, latitude])
      .join(",")})`

现在可以使用了！

但是还有一个问题就是如何让变量projection在scope中可见？

放Projection_Transform香水

D3 Projection_Transform attr

svg

d3.js

transform

projection

translate