澳大利亚的 D3JS TopoJSON 地图：投影准确但未呈现国家/地区

Question

我正在生成澳大利亚的 TopoJSON 地图。我已经成功生成了澳大利亚的 GeoJSON 地图。然后我将该数据转换为 TopoJSON 但无法呈现地图。

注意事项：

我可以准确地投影 lat/long 个城市点（即它们的空间关系看起来正确）。因此，我认为投影没问题。
没有生成路径，页面为空白。但是与成功的在线教程相比，数据文件看起来是正确的。不知道为什么会这样。

我在这里创建了一个 JSFiddle：https://jsfiddle.net/6j8sz21L/

谢谢！

这里是供参考的 D3JS 代码（更多细节请参见 JSFiddle）：

<!DOCTYPE html>
<html>
  <head>
    <title>Australia</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v2.min.js"></script>
    <style type="text/css">
        .pin {
            border: 1px solid white;
        }

        svg {
            background: lightblue;
        }
    </style>
  </head>

  <body>
    <script type="text/javascript">

        var width = 960,
            height = 700;

        var projection = d3.geo.mercator()
            .center([131,25])
            .scale(900)
            .translate([400,-500]);

        var path = d3.geo.path()
            .projection(projection);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];

        //Probably best practice to reverse these calls
        d3.csv("/Australia/Data/ABS_Pop_15.csv", function(data) {

            //Set up fill colours
            var minimum = d3.min(data, function(d) { return d.Value; }),
                maximum = d3.max(data, function(d) { return d.Value; });

            var minimumColor = "#e5f5f9", 
                maximumColor = "#99d8c9";

            var color = d3.scale
                .linear()
                .domain([minimum, maximum])
                .range([minimumColor, maximumColor]);               

            //Clean data
            var ValueById = {};

            data.forEach(function(d) { 
                ValueById[d.id] = +d.Value; 
            });                                     

            d3.json("/Australia/Data/australia_adm4_topo_id.json", function(sa2) {


                svg.append("path")
                    .data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
                    .enter().append("path")
                    .attr("d", path);

                    console.log(sa2);

                    svg.selectAll(".label")
                    .data(places)
                    .enter().append("text", ".label")
                    .attr("transform", function(d) {
                        return "translate(" + projection([d.location.longitude, d.location.latitude]) + ")";
                    })
                    .style("font-family", "Arial, sans-serif")
                    .style("font-size", "12px")
                    .style("font-weight", "bold")                       
                    .style("stroke-width", "0px")
                    .style("stroke", "#fff")                        
                    .attr("dy", function(d) { return d.position.dy; })
                    .attr("dx", function(d) { return d.position.dx; })
                    .text(function(d) { return d.name; });                  
            });
        });         
</script>

Answer 1

给您带来问题的代码行是：

svg.append("path")
  .data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
  .enter().append("path")
  .attr("d", path);

改用它（您可以直接将其复制到 fiddle 中的上面一行）：

svg.selectAll("path")
  .data(topojson.feature(sa2, sa2.objects.australia_adm4).features)
  .enter().append("path")
  .attr("d", path);

我根据一个类似的模板做了一些重写，我不得不展示这个工作：

//map frame dimensions
var width = 960;
var height = 640;

//create a new svg element with the above dimensions
map = d3.select('#map')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

//create projection
var projection = d3.geo.mercator()
  .center([0, -27])
  .rotate([-140, 0])
  .scale(Math.min(height * 1.2, width * 0.8))
  .translate([width / 2, height / 2])
  .precision(0.1);

//create svg path generator using the projection
var path = d3.geo.path()
  .projection(projection);

// locations to render
var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];

// render map
var url = 'https://rawgit.com/DanielGalletta/Carto/master/Data/australia_adm4_topo_id.json';
d3.json(url, renderMap);

function renderMap(error, geoData) {

  //add geometry to map   
  var mapAreas = map.selectAll('path')
    .data(topojson.feature(geoData, geoData.objects.australia_adm4).features)
    .enter() //create elements
    .append('path') //append elements to svg
    .attr('d', path) //project data as geometry in svg
  
  // add locations to map
  var cities = map.selectAll('.label')
    .data(places)
    .enter()
    .append('text', '.label')
    .attr('transform', function(d) {
      return 'translate(' + projection([d.location.longitude, d.location.latitude]) + ')';
    })
    .attr('dy', function(d) { return d.position.dy; })
    .attr('dx', function(d) { return d.position.dx; })
    .text(function(d) { return d.name; })

};

path {
  stroke-width: 1px;
  stroke: white;
  fill: lightblue;
  cursor: pointer;
}
path:hover,
path.highlighted {
  fill: steelblue;
}
.label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  stroke-width: 0px;
  stroke: #fff
}

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<div id="map"></div>

此外，这里有一个 useful blog article 关于 selectAll 和 append 函数如何对元素进行操作的 useful blog article。

澳大利亚的 D3JS TopoJSON 地图：投影准确但未呈现国家/地区

D3JS TopoJSON map of Australia: projection accurate but no country rendered

javascript

cartography

geojson

d3.js

topojson