D3JS TopoJSON карта Австралии: прогноз точный, но страна не сделана

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

Things отметить:

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

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

источник

2016-12-26 Daniel Galletta

Код строки, который дает вам вопрос будет:

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);

Я немного переписал o ФФ подобного шаблона я должен был показать эту работу:

//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 \t \t \t 
 
    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 функции работают на элементах.

источник

2016-12-26 02:08:20

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

D3JS TopoJSON карта Австралии: прогноз точный, но страна не сделана

ответ

Смежные вопросы