Question

我正在使用d3库来绘制世界地图。我需要显示国家/地区名称。我怎样才能做到这一点？我的代码位于this Codepen Sample。

d3.json(
    "https://gist.githubusercontent.com/d3noob/5193723/raw/world-110m2.json",
    function (error, topology) {
        let world = g
            .selectAll("path")
            .data(topojson.object(topology, topology.objects.countries).geometries)
            .enter()
            .append("path")
            .attr("d", path);

        // add city location circles
        let locations = g
            .selectAll("circle")
            .data(cities)
            .enter()
            .append("circle");
    }
);

红点是我想在地图上标记的几个城市。

Answer 1

您可以将国家/地区名称添加为文本标签，如下所示。

let labels = g
  .selectAll("text")
  .data(topojson.object(topology, topology.objects.countries).geometries)
  .enter()
  .append("text")
  .text(function(d) {
    return d.properties.name;
  })
  .style("stroke","#908e8e")
  .style("font-size","10px")
  .attr('x', function(d) {      
    return projection(d3.geo.centroid(d))[0];
  })
  .attr('y', function(d) {
    return projection(d3.geo.centroid(d))[1];
  });

＆＃13;

"use strict";

let cities = [{
    code: "CHG",
    city: "CHICAGO",
    country: "USA",
    lat: 60.8625755,
    lon: -109.6761027,
    price: "350"
  },
  {
    code: "TR",
    city: "TORONTO",
    country: "CANADA",
    lat: 60.6448096,
    lon: -75.39152,
    price: "350"
  },
  {
    code: "NY",
    city: "NEW YORK",
    country: "USA",
    lat: 40.6976637,
    lon: -74.1197639,
    price: "350"
  },
  {
    code: "SJ",
    city: "SAN JOSE",
    country: "USA",
    lat: 37.3684435,
    lon: -121.9298627,
    price: "350"
  },
  {
    code: "LN",
    city: "LONDON",
    country: "UK",
    lat: 51.504847,
    lon: 0.0473293,
    price: "350"
  },
  {
    code: "BR",
    city: "BERLIN",
    country: "GERMANY",
    lat: 32.5896618,
    lon: -2.9710472,
    price: "350"
  },
  {
    code: "SJ",
    city: "SAN JOSE",
    country: "USA",
    lat: 37.3684435,
    lon: -121.9298627,
    price: "350"
  }
];

let width = 1200,
  height = 600;

let projection = d3.geo
  .mercator()
  .center([50, 10]) //long and lat starting position
  .scale(450) //starting zoom position
  .rotate([10, 0]) //where world split occurs
  .translate([width / 0.8, height / 0.8]);

let svg = d3
  .select("body")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("position", "fixed")
  .attr("id", "root");

let path = d3.geo.path().projection(projection);

let g = svg.append("g").attr("id", "g");

// load and display the world and locations
d3.json(
  "https://gist.githubusercontent.com/GordyD/49654901b07cb764c34f/raw/27eff6687f677c984a11f25977adaa4b9332a2a9/countries-and-states.json",
  function(error, topology) {
    let world = g
      .selectAll("path")
      .data(topojson.object(topology, topology.objects.countries).geometries)
      .enter()
      .append("path")
      .attr("d", path);

    // add city location circles
    let locations = g
      .selectAll("circle")
      .data(cities)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
      })
      .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
      })
      .attr("r", 10)
      .style("fill", "red")
      .style("opacity", 0.6)
      .attr("id", d => d.code)
      .attr("data-city", d => d.city)
      .attr("data-price", d => d.price)
      .attr("class", "points");

    let labels = g
      .selectAll("text")
      .data(topojson.object(topology, topology.objects.countries).geometries)
      .enter()
      .append("text")
      .text(function(d) {
        return d.properties.name;
      })
      .style("stroke","#908e8e")
      .style("font-size","10px")
      .attr('x', function(d) {      
        return projection(d3.geo.centroid(d))[0];
      })
      .attr('y', function(d) {
        return projection(d3.geo.centroid(d))[1];
      });
  }
);

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  background-color: #121313;
}

path {
  stroke: #3f3f3d;
  stroke-width: 0.5px;
  fill: #31302f;
}

.hidden {
  display: none;
}

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>

＆＃13;

如何在SVG地图上显示国家/地区名称？

1 个答案: