我已經從 topojson 使用 D3 建立了一張地圖,但在 html 中,國家的數據尚未顯示。
大家好!
我已經從 topojson 檔案中使用 d3 產生了歐洲地圖。 這是我的程式碼
const svg =d3.select('body').append('svg').attr('width', width).attr('height', height); const projection = d3.geoMercator().scale(600).center([13.439235,48.830666]) .translate([width / 2, height / 2]); // translate map to svg; const path=d3.geoPath(projection); const g = svg.append('g'); d3.json('./europe.topojson') .then(data =>{ const countries = topojson.feature(data, data.objects.europe); console.log(countries); g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', path);
topojson 檔案是這樣的:
{"type":"Topology","objects": {"europe": {"type":"GeometryCollection","geometries":[{"type":"MultiPolygon", "properties":{"NAME":"Azerbaijan"},"id":"AZ","arcs":[[[0,1,2]],[[3]],[[4]],[[5,6,7,8,9,10],[11]]]}, {"type":"Polygon","properties":{"NAME":"Albania"},"id":"AL","arcs":[[12,13,14,15,16,17,18]]}, {"type":"MultiPolygon","properties":{"NAME":"Armenia"},"id":"AM","arcs":[[[-12]],[[19,-3,20,21,-7],[-5],[-4]]]}, {"type":"Polygon","properties":{"NAME":"Bosnia and Herzegovina"},"id":"BA","arcs":[[22,23,24,25,26,27,28,29,30,31]]}, ...
-並且適用於所有國家/地區-
地圖顯示在我的瀏覽器中,但沒有資料屬性(名稱、id)。
當我 console.log(countries) 時,控制台會列印來自 topojson 的數據,例如 name 、 id 等。 這是來自控制台的:
0 : {type: 'Feature', id: 'AZ', properties: {…}, geometry: {…}} 1 : {type: 'Feature', id: 'AL', properties: {…}, geometry: {…}} 2 : {type: 'Feature', id: 'AM', properties: {…}, geometry: {…}} 3 : {type: 'Feature', id: 'BA', properties: {…}, geometry: {…}}
你有什麼想法嗎?
目前尚不清楚您希望在哪裡看到每個功能的屬性。在您共享的程式碼中,您從未使用過該資料。
如果您想要的只是一些標籤,您可以按照此範例進行操作
https://observablehq.com/@rahulbot/us-map-with -標籤
#