D3地理投影和Blob

Question

我正在尝试使用.shp文件和D3映射城市道路。投影是错误的，我已经耗尽了我的谷歌能力。

• .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中进行映射时，“blobs”出现在我的投影中。

我最初认为这是我的投影，但它在mercator / albers中看起来很相似。通过样式我可以关闭黑色填充，但我不能设置笔划宽度来看轮廓（出现白色，只有突出显示让我放大它）。

但是，我在map.json中使用了相同的Mapshaper文件，以确保它不是我的.json文件，并且看起来投影得很好。 。我也可以使用.shp＆amp; QGIS中的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);
});

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

Answer 1

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

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

Answer 2

发现这是我的CSS造型，投影效果很好。

更改笔触颜色并设置填充：无;似乎可以做到这一点。