缺少一個步驟爲d3連接數據在等值線圖

Question

我想連接我的兩個json文件以顯示我的等值線圖上的信息。我有地圖渲染，但當我將第二個json文件連接到地圖文件時，我被卡住了。這兩個文件都包含所有項目的ID，但ID不在對象之前，它在裏面，所以我不確定如何抓住它。

這是我目前有：

var data; // loaded asynchronously 
var width = 600; 
var height = 600; 

var projection = d3.geo.albers() 
       //.center([-84.36322, 32.397649]); 
       .translate([-1000,-200]) 
       .scale([6000]); 

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

var svg = d3.select("#chart") 
.append("svg:svg"); 

var counties = svg.append("svg:g") 
.attr("id", "counties") 
.attr("class", "Blues"); 


d3.json("data/myData/simpleGA.json", function(json) { 
counties.selectAll("path") 
    .data(json.features) 
.enter().append("svg:path") 
    .attr("class", data ? quantize : null) 
    .attr("d", path); 
}); 

d3.json("data/myData/lotteryMapNum.json", function(json) { 

data = json; 

counties.selectAll("path") 
    .attr("class", quantize); 
}); 

function quantize(d) { 
    return "q" + Math.min(8, ~~(data[d.id].hopeDollars * 9/12)) + "-9"; 
} 

simpleGA.json

{ 
    "type": "FeatureCollection", 

    "features": [ 
    { "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Lanier County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } } 
] 
} 

lotteryMapNum.json

[ 
{"COUNTY":"Lanier", 
    "hopeDollars":12921240, 
    "id":"0"} 
] 

新的代碼提示：

var newDict = {}; 


d3.json("data/myData/lotteryMapNum.json", function(data) { 
data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;}) 
data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;}); 

d3.json("data/myData/simpleGA.json", function(json) { 
    counties.selectAll("path") 
    .data(json.features) 
    .enter().append("svg:path") 
    .attr("class", function(d) { return quantize(newDict[d.id]);}) 
    .attr("d", path) 
    .call(d3.helper.tooltip() 
     //.attr({class: function(d, i) { return d + ' ' + i + ' A'; }}) 
     .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; }) 
    ) 
    .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'});  }) 
    .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); }); 

}); 

}); 
var quantize = d3.scale.quantize() 
//.domain([611850, 627698760]) 
.domain([0, 700000000]) 
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); 


}; 

Answer 1

使用id作爲鍵和未量化的值的空字典：

d3.json("data/myData/simpleGA.json", function(json) { 
    counties.selectAll("path") 
    .data(json.features) 
    .enter().append("svg:path") 
    .attr("class", function(d) { return quantize(newDict[d.id]); }) 

隨意添加空：

var newDict = {}; 

d3.json("data/myData/lotteryMapNum.json", function(data) { 
    data.forEach(function(d) { newDict[d.id] = +d.hopeDollars; }); 
}); 

然後，設置路徑類時使用量化功能恢復條件以檢查ID是否存在。

基本上，這將只使用檢查每個路徑id（d.id）的字典值，返回量化值，並相應地設置類。

也有一個整潔的實現量化的：

var quantize = d3.scale.quantize() 
    .domain([0, 1]) 
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));