相关疑难解决方法(0)

D3 - 大型GeoJSON文件未使用投影正确显示绘图

我在绘制从data.seattle.gov中提取的GeoJSON文件时遇到问题.具体来说,我正在使用可在此处找到的Shape文件.我将它转换为GeoJSON文件,我在下面提供了一个小样本.

通过使用D3,我希望得出西雅图应该是不同的区域(实际上我不完全确定它应该是什么,这就是为什么我画它...哈...)但由于某种原因尽管正确计算了路径,但它没有正确显示.

在这里举办了我的例子.当我有时间设置它时,我会尝试用jsFiddle替换这个链接.问题是,GeoJSON文件非常大,所以我不认为jsFiddle是理想的.

我的代码很简单......我只是根据GeoJSON文件的功能添加路径.

var width = 1000,
    height = 1000;

var svg = d3.select("body")
            .append("svg")
            .attr("width", width + "px")
            .attr("height", height + "px");

var projection = d3.geo.mercator()
    .scale(150)
    .translate([width/2, height/2]);

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

var g = svg.append("g");

d3.json("geojson/data.geo.json", function(data) {
    console.log(data);
    g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("stroke", "black")
        .attr("stroke-width", "5px")
        .attr("fill-opacity", 0);
});
Run Code Online (Sandbox Code Playgroud)

不幸的是,我觉得它只显示其中一条路径而不是所有路径.起初我以为可能是因为有某种填充而且它们只是隐藏在彼此之上,但我将其设置fill-opacity为0,这也没有帮助.

以下是GeoJSON文件的一小部分示例.

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [ …
Run Code Online (Sandbox Code Playgroud)

javascript maps data-visualization geojson d3.js

3
推荐指数
1
解决办法
2988
查看次数

标签 统计

d3.js ×1

data-visualization ×1

geojson ×1

javascript ×1

maps ×1