D3 地理投影和 Blob [重复]答案

【问题标题】：D3 Geo Projection and Blobs [duplicate]D3 地理投影和 Blob [重复]
【发布时间】：2015-11-10 20:09:27
【问题描述】：

我正在尝试使用 .shp 文件和 D3 绘制城市道路。投影有问题，我已经用尽了我的 Google 能力。

.shp 文件来自 Mapzen (mapzen.com)，它们使用 EPSG:4326 作为投影类型。
在可以映射之前，我不会烘焙数据，并且 ogr2ogr 默认为 4326 投影。
.shp 文件所在的目录包含所需的所有相关文件（.prj 等）。

.shp 文件所在的目录包含所需的所有相关文件（.prj 等）。

ogr2ogr \
    -f GeoJSON \
    roads.json \
    mapzen_file.shp
topojson \
    -o map.json \
    roads.json

我的问题：当我在d3 中映射时，“斑点”出现在我的投影中。

我最初认为这是我的投影，但在墨卡托/阿尔伯斯中看起来很相似。通过造型我可以关闭黑色填充，但我不能设置笔触宽度来查看轮廓（出现白色，只有突出显示让我放大到它）。

但是，我在Mapshaper 中使用了相同的map.json 文件，以确保它不是我的.json 文件，并且它看起来可以很好地投影。。我也可以毫无问题地在 QGIS 中使用 .shp 和 geojson 文件。

因为我在转换中没有使用任何投影设置，所以我的代码中包含了投影功能。我还使用了重绘功能，因此我可以轻松找到比例/平移。我的代码如下：

var width = 960,
    height = 600,
    defScale = 1000,
    defTranslate = [0, 0];

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().on("zoom", redraw));

function redraw() {
    console.log("redraw scale",d3.event.scale * defScale);

    projection.scale(d3.event.scale * defScale);
    var xTranslate = d3.event.translate[0] + defTranslate[0],
        yTranslate = d3.event.translate[1] + defTranslate[1];

    console.log("redraw x: ", xTranslate);
    console.log("redraw y: ", yTranslate);

    projection.translate([xTranslate, yTranslate]);
    svg.selectAll("path")
        .attr("d", path);
}

d3.json("map.json", function(mapData) {
    svg.append("path")
        .datum(topojson.feature(mapData, mapData.objects.roads))
        .attr("class", "roads")
        .attr("d", path);
});

我知道这很拗口，但我正在努力提供尽可能多的信息。有什么想法吗？

【问题讨论】：

您是否尝试为路径设置fill: none？

标签： javascript json d3.js gis

【解决方案1】：

我认为您所看到的是路径的填充。您可以尝试添加以下样式表吗：

.roads { 
  fill: none;
  stroke: rgba(100, 100, 150, 0.5);
  stroke-width: 1px;
}

【讨论】：

【解决方案2】：

发现这是我的 CSS 样式，投影效果很好。

改变描边颜色和设置填充：无；似乎成功了。

【讨论】：