2014-12-08 47 views
0

中只繪製了一個特徵,雖然對於D3js來說是非常新穎的東西,但我已經將大部分東西啓動並運行了。然而,還沒有工作的是顯示一個基於geoJSON的城市邊界地圖(數據:http://ddj.haim.it/data/muenchen.geojson)。D3js在geoJSON FeatureCollection

這是我一直在努力最近:

var nWidth = 800, nHeight = 600, 
    oMap = d3.select('body').append('svg').attr('width', nWidth).attr('height', nHeight), 
    oProjection = d3.geo.mercator().center([ 11.591, 48.139 ]).scale(50000).translate([nWidth/2, nHeight/2]), 
    oPath = d3.geo.path().projection(oProjection); 
d3.json('data/muenchen.geojson', function(_mError, _oCollection) { 
    oMap.append('g') 
     .selectAll('path') 
     .data(_oCollection.features) 
     .enter() 
     .append('path') 
     .attr('class', 'entity') 
     .attr('d', oPath); 
}); 

我會得到什麼?只有最後一個特徵被正確繪製並且另一個被繪製爲一個巨大矩形的地圖(好,在源中,它不是直角,它是路徑)。

任何幫助非常感謝。

多謝, 馬里奧

+0

確保你沒有填充路徑。 – 2014-12-08 09:26:22

回答

0

不知道我是否明白你的意思,拉爾斯。我可以看到來自geoJSON的最後一個多邊形,但只有最後一個。這裏是當前輸出:http://ddj.haim.it/d3.html

編輯:好吧,我明白了你的觀點。對不起,非常感謝答案。 關鍵是要用透明度「填充」路徑(在CSS中)。