绘制肯尼亚县 d3.geo.path()答案

【问题标题】：Drawing Kenyan counties d3.geo.path()绘制肯尼亚县 d3.geo.path()
【发布时间】：2015-08-05 20:25:48
【问题描述】：

我对 D3 有点陌生，我正在尝试为我工作的组织开展一个项目。我需要用我们收集的一些数据绘制肯尼亚的等值线图。我正在研究 Scott Murray 的书 Interactive Data Visualization for the Web。在他的书中，他使用以下内容从美国各州的 json 文件中生成路径：

//Width and height
        var w = 500;
        var h = 300;

        //Define default path generator
        var path = d3.geo.path();

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Load in GeoJSON data
        d3.json("us-states.json", function(json) {

            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
               .data(json.features)
               .enter()
               .append("path")
               .attr("d", path);

        });

我尝试修改此代码以从我从下载的肯尼亚 shapefile 创建的 json 文件中绘制肯尼亚县。 json 文件的结构看起来就像美国各州文件的结构，但是当我在浏览器中查看 HTML 时，我看不到任何行。我检查控制台和路径占位符是否没有数据。如果我换入 US-states.json 文件，我会在浏览器中看到带有数据的路径和地图。

谁能帮帮我。

谢谢

【问题讨论】：

您似乎没有为您的路径分配投影。
哪种投影最适合使用？
任何都应该是合适的，除了美国阿尔伯斯。
您可能会发现this question 很有帮助。
问题可能是 D3 需要经纬度，而 shape 文件使用不同的坐标系。一个快速检查的方法是查看 GeoJSON 文件中的几个点：它们的经度是否在 38 左右，纬度是否接近于零？ Mike Bostock's Let's Make a Map tutorial 可能很有用，尤其是它提到在 ogr2ogr 中使用 -t_srs EPSG:4326。

标签： javascript json d3.js maps geojson

【解决方案1】：

我正在为内罗毕做类似的事情。正如拉斯在 cmets 中所说，您似乎还没有为地图设置投影。下面的代码使用墨卡托投影，地图以内罗毕为中心。

（请注意，比例尺非常放大，您必须缩小比例才能将整个肯尼亚纳入其中）。

var margin = {top: 50, right: 20, bottom: 20, left: 60},
    dynwidth = $("#nairobistock").width(),
    rowheight = 460;
    width = dynwidth - margin.left - margin.right,
    height = rowheight - margin.top - margin.bottom;

var projection = d3.geo.mercator()
    .center([36.8, -1.3])
    .scale([90000])
    .translate([width/2, height/2]);

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

var svg = d3.select("#nairobistock").append("svg")
    .attr("width", (width + margin.left + margin.right) )
    .attr("height", (height + margin.top + margin.bottom) );

d3.json("topojson/KEN-3topo.json", function(error, nairobi){
    if (error) return console.error(error);
    console.log(nairobi);
    console.log("topojson added");

    svg.selectAll("path")
        .data(topojson.feature(nairobi, nairobi.objects.suburbs).features)
        .enter()
        .append("path")
        .attr("class", function(d) {return d.ID;})
        .attr("d", nairobipathing );

});

希望这会有所帮助。

【讨论】：