D3 geojson 解析失敗

d3 geojson

Zaku 2019-11-05 15:48:24 ‧ 1059 瀏覽

分享至

目前使用D3劃出地圖，來源為政府的地理資訊如:
直轄市、縣市界線(TWD97經緯度)
https://data.gov.tw/dataset/7442
(這個可以成功繪出)

透過mapshaper
https://mapshaper.org/
可轉存出geojson給d3去解析並劃出地圖

但我目前畫 村里界圖(TWD97_119分帶)
https://data.gov.tw/dataset/7439
轉成geojson給D3解析不出來，只出現一個大黑塊，
試過設定.center()或縮放.scale()獲都不設定，都失敗，如下圖

程式碼概略如下

d3.json(" http://127.0.0.1:4200/assets/data/svg.json", function (topodata) {
      var features = topodata.features;
      var path = d3.geo.path().projection(
        d3.geo.mercator() 
      );
      svg.selectAll("path").data(features)
        .enter().append("path").attr("d",path);
    });

有試著把轉出來的geojson丟回mapshaper，是可以顯示的，看了一下直轄市、縣市界線(TWD97經緯度)的data結構感覺是差不多的，不知問題出在哪

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2019-11-05 18:04:31 檢舉

1.確認 svg.json內容正常
2.確認 features 正常
3. 用GoogleChrome按F12開發者工具檢視svg裡面的path(如果svg.json&features正常也有綁定正常的話，應該會有很多個path節點)是否有正確綁定features的資料
你需要自己確認是資料問題還是資料綁定問題還是繪制問題?
給的資訊不足只能給這些建議。

dragonH iT邦超人 5 級 ‧ 2019-11-05 23:49:24 檢舉

我試到現在也是無法

什麼轉 topojson

turf.rewind()

都試過了

不過倒是測到

如果改成

.data(features.slice(0, 1))

會有很有趣的效果

ccutmis iT邦高手 2 級 ‧ 2019-11-06 09:28:32 檢舉

用開發者工具展開svg裡面的節點是有畫出path，d也有綁定資料，樓主說的一整塊黑色是因為線全部擠在那個黑色區塊的區域裡了，試著把svg的長寬放大到10000px你就會看到裡面畫的密密麻麻的線，
這個我在想有兩種可能:
1. 源data有問題
2.源data沒問題那就是data投影到平面的處理有問題
不過我本身在工作上沒用過d3.geo相關，也暫時沒空研究，如果過一陣子這題還是沒人解的話再來研究...^^

Zaku iT邦新手 3 級 ‧ 2019-11-06 13:12:42 檢舉

data丟到mapshaper是可以成功預覽的跟顯示的，轉 topojson也試過一樣的情況

ccutmis iT邦高手 2 級 ‧ 2019-11-06 13:29:57 檢舉

你用來顯示在畫面上的不是mapshaper 而是 d3.js
兩者不是同一個函式庫，餵同樣資料有不同結果就是我前面說過的:
"源data沒問題那就是data投影到平面的處理有問題"
目前已知有data 有綁定到 path 但畫出來的結果是很奇怪的線
建議研究d3.js 如何處理geojson 或topojson 的原理再從中找原因吧

登入發表討論