个人中心
gpt4 book ai didi

javascript - D3JS TopoJSON 澳大利亚 map : projection accurate but no country rendered

转载 作者：行者123 更新时间：2023-11-29 21:12:04 27 4
gpt4 key购买 nike

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

注意事项:

  • 我可以准确地投影城市的纬度/经度点(即它们的空间关系看起来正确)。因此，我认为投影没问题。
  • 没有生成任何路径，页面为空白。但是与成功的在线教程相比，数据文件看起来是正确的。不确定为什么会这样。

我在这里创建了一个 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>

最佳答案

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

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 函数如何对元素进行操作。

关于javascript - D3JS TopoJSON 澳大利亚 map : projection accurate but no country rendered，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41325519/

27 4 0
文章推荐： javascript - 我怎样才能从 Node 插件返回看起来像数组的东西？
文章推荐： mysql - 如何创建具有重复列的 View 并将它们合并？
文章推荐： C# 无法通过 Nhibernate 执行 mysql 存储过程
文章推荐： mysql - 无法在 Ubuntu 14.04 上安装 MySQL - mysql-client libmysqlclient-dev
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com