D3 - 與自定義json的地圖

我想繪製一個自定義地圖使用JSON，我會從一個Web服務，因此不在一個文件中。D3 - 與自定義json的地圖

JSON的可能會是這樣的

{ 
    "areas" : [ 
     { 
      "name" : "A", 
      "borders" : [[4,50], [4.5,51],...], 
      "otherProperty" : "red" 
     }, 
     { 
      "name" : "B", 
      "borders" : [[3,48] , [3.5,49],...], 
      "otherProperty" : "yellow" 
     } 
    ] 
}

的邊框將繪製多邊形是該地區的邊界。

是否可以像這樣使用Json繪製地圖？我可以根據需要更改json

如何使用此json而不是文件？

d3.json("myFile.json", function(error, data) {...}

編輯

我可以直接使用

g.selectAll('path') 
.data(data.areas)

，但無任何顯示沒有錯誤

EDIT 2

我使用CONI cConformal座標點

[181096,163474]，[180722,164173]，[180280,164925]，

EDIT 3

在這裏是一個不工作JSFiddle

來源

2016-09-09 Weedoze

你能否提供一個鏈接到jsfiddle？ – elias

創建一個jsfiddle很複雜..你需要更多的信息嗎？你需要哪部分代碼？ – Weedoze

嗯，我創建了一個jsfiddle，它將數據結構轉換爲給定邊框的多邊形。希望它能回答你的問題。 – elias

我不確定我是否已經明白了你的問題。

如果json來自文件或來自web服務器，應該沒關係，您可以在d3.json調用中提供路徑或URI。或者如您在編輯中發佈的那樣，您可以直接使用該變量。

你給的結構可以沒有任何問題地使用。

我假設你正在使用D3 v3。 Here你可以找到API文檔的相應部分。使用有關svg路徑的this tutorial我創建了a jsfiddle，它顯示具有給定json結構的多邊形（我已更改數字以獲得更明顯的結果）。

以下函數負責在生成將用作多邊形邊界的路徑時獲取數據的正確部分。

var lineFunction = d3.svg.line() 
        .x(function(d) { return d[0]; }) 
        .y(function(d) { return d[1]; }) 
        .interpolate("linear");

這就是你如何傳遞到線發生器：

.attr("d",function(d) {return lineFunction(d.borders);})

見上面鏈接的完整代碼的小提琴。

來源

2016-09-10 13:22:33 elias

這似乎在你的JsFiddle中運行良好，但我的邊界是真正的座標。我怎樣才能用這個投影？它使用geoConicConformal投影 – Weedoze

而我將切換到V4 – Weedoze

@Weedoze，請提供一個jsfiddle，以減少誤解，並顯示您的努力。 – elias

D3 - 與自定義json的地圖

回答

相關問題