使用D3.js僅渲染topojson地圖的一部分

Question

我正在使用D3.js庫從US Census shapefile創建地圖。 我正在尋找創建一個完整的美國地圖，這是沒有問題的，以及每個州的地圖。

我的工作流程使用人口普查數據，ogr2ogr在命令行根據需要進行了更改，然后由shpescape.com轉換為topojson或geojson，因為topojson模塊的node.js下載錯誤（請參閱下面的編輯解決方案）問題）。

我的問題更多的是一個實用的問題而不是其他任何問題 - 當提供此代碼時（以http://bl.ocks.org/mbostock/4707858為模型）：

            var width = 640,
                height = 500;

            var projection = d3.geo.albers();

            var path = d3.geo.path()
                .projection(projection);

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            d3.json("mt_geo.json", function(error, mt_topo) {
                var states = topojson.feature(mt_topo, mt_topo.objects.states),
                    state = states.features.filter(function(d) { return d.id === 34; })[0];
                projection
                    .scale(1)
                    .translate([0,0]);
                var b = path.bounds(state),
                    s = .95 / Math.max ((b[1][0]-b[0][0])/width, (b[1][1]-b[0][1])/height),
                    t = [(width-s*(b[1][0]+b[0][0]))/2, (height-s*(b[1][1]+b[0][1]))/2];
                projection
                    .scale(s)
                    .translate(t);
                svg.append("path")
                    .datum(states)
                    .attr("class", "feature")
                    .attr("d", path);
                svg.append("path")
                    .datum(topojson.mesh(us, us.objects.states,function(a, b) {return a !== b;}))
                    .attr("d", path);
                svg.append("path")
                    .datum(state)
                    .attr("class", "outline")
                    .attr("d", path);

它不僅在“var states”行拋出一個錯誤，它說“無法讀取未定義的屬性類型” - 但我也不知道我應該將什么傳遞給匿名函數，或者mt_topo.objects .states應該是指。 關於這種GIS的事情沒有很好的文檔。 所有人口普查地圖都有“狀態”功能嗎？ 當你將.shp壓縮到topojson時，你會丟失這些信息嗎？

簡單地說，如果d3.json采用（對象，函數（錯誤，json）），那么實際工作的示例會是什么樣的？

編輯：替代方案和WINDOWS 7 IDIOSYNCRASIES -----

大多數教程都告訴你使用來自node.js的模塊，但我在Windows7上，規范的命令行“npm install -g topojson”在“contextify”失敗。 創建者給我發了一個很好的鏈接來解決這個問題。

這很重要，因為在topojson的命令行中有一個標志，您可以在其中將geojson中的現有要素打包到topojson中的可訪問對象中。 例如，上面的代碼使用topojson中的“states” - 除非你使用以下命令，否則這是無意義且無法訪問的：

topojson -o us.topojson -- states=us_states.json

雙連字符和狀態之間的空間很重要。 然后，您可以通過us.objects.states訪問狀態，如上面的原始代碼所示。

Answer 1

你很近。 沒有測試你的代碼，我看到一個主要問題。 JSON回調的第二個參數是mt_topo ，您在定義時使用它

var states = topojson.feature(mt_topo, mt_topo.objects.states)

但是，稍后您將us用作回調對象，大概是因為這就是Mike Bostock在您引用的示例中使用的內容。 相反，它應該是這樣的：

svg.append("path")
 .datum(topojson.mesh(mt_topo, mt_topo.objects.states,function(a, b) {return a !== b;}))
 .attr("d", path);

也就是說，你的問題是關於人口普查地圖是否具有“狀態”功能。 我的猜測是，你使用的幾何體沒有狀態特征，這就是你得到錯誤的原因。 使用topojson命令行工具時，功能名稱（即data.objects.x）通常是輸入文件的名稱，因此如果您的文件是US_Census_2010.shp ，則需要將狀態定義為

var states = topojson.feature(mt_topo, mt_topo.objects.US_Census_2010)

打開mt_geo.json文件，查看您的功能的名稱。 希望有所幫助！

Answer 2

表示地圖的GeoJSON文件通常具有一個或多個功能。 每個要素可能具有零個或多個屬性。 通常，屬性用於存儲場所的元數據（州名，縣等）。 您可以閱讀GeoJSON文件並查看它具有的屬性，並使用此屬性顯示或隱藏功能。

將文件從GeoJSON轉換為TopoJSON時， 您可以保留或刪除原始屬性 。 例如，教程Let's Make a Map中的uk.json文件中的特征和點具有屬性name 。