Question

我是D3的新手，我正在尝试为我工作的组织开展一个项目。我需要绘制肯尼亚的等值线图和我们收集的一些数据。我正在研究Scott Murray的书“互动数据可视化网络”。在他的书中，他使用以下方法从美国各州的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文件，我会在浏览器中看到包含数据和地图的路径。

请有人帮助我。

由于

Answer 1

我正在为内罗毕做类似的事情。正如Lars在评论中所说，看起来你没有为地图设置投影。下面的代码使用墨卡托投影，地图以内罗毕为中心。

（请注意，比例是非常放大的，你必须减少它才能让整个肯尼亚进入。）

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

});

希望这有帮助。

绘制肯尼亚县d3.geo.path（）

1 个答案: