D3地理投影和斑點

我試圖用.shp文件和D3來繪製城市道路。投影是越野車，我耗盡了我的Google能力。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地圖， '斑點' 出現在我的投影。 See a screenshot here.

我最初認爲這是我的預測，但它在mercator/albers中看起來很相似。通過樣式我可以關閉黑色填充，但我無法設置筆觸寬度以查看輪廓（白色，只有突出顯示可以縮放）。

但是，我在Mapshaper中使用了相同的map.json文件，以確保它不是我的.json文件，並且它看起來投影得很好。 See Mapshaper screenshot 。我也可以在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); 
});

我知道這是一口，但我試圖提供儘可能多的信息。有任何想法嗎？

來源

2015-11-10 Ryan Larson

您是否嘗試過爲路徑設置'fill：none'？ –

我想你看到的是路徑的填充。你可以嘗試添加下面的樣式表：

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

來源

2015-11-10 20:17:20 SiggyF

發現這是我的CSS樣式，投影效果還算不錯。

更改筆觸顏色並設置填充：無;似乎在做伎倆。

來源

2015-11-10 20:20:04

D3地理投影和斑點

回答

相關問題