Карта Австралии D3JS TopoJSON: проекция точная, но страна не отображается

Я создаю картограмму TopoJSON Австралии. Я успешно создал карту Австралии в формате GeoJSON. Затем я преобразовал эти данные в TopoJSON, но не могу отобразить карту.

Что следует отметить:

Я могу точно спроецировать точки широты и долготы городов (т. е. их пространственное соотношение выглядит правильно). Поэтому я считаю, что прогноз в порядке.
Пути не генерируются, и страница пуста. Но файл данных выглядит правильно по сравнению с успешными онлайн-учебниками. Не уверен, почему это так.

Я создал 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>

Daniel 26.12.2016 источник

Ответы (1)

arrow_upward
2
arrow_downward

Строка кода, которая вызывает у вас проблему:

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

Используйте это вместо этого (вы можете скопировать его прямо над строкой выше в своей скрипте):

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>

Кроме того, вот полезная статья в блоге о том, как функции selectAll и append работают с элементами.

Robin Mackenzie 26.12.2016

comment

Большое спасибо Робин! Я особенно ценю, что вы помогли мне понять, как правильно структурировать мой код. - Daniel; 26.12.2016

Карта Австралии D3JS TopoJSON: проекция точная, но страна не отображается

Ответы (1)

Вопросы по теме