Javascript 如何将.defer与内部数据对象d3 topoJSON映射一起使用?

Javascript 如何将.defer与内部数据对象d3 topoJSON映射一起使用?,javascript,json,d3.js,Javascript,Json,D3.js,在阅读了所有文档之后,我无法理解如何将内部json对象加载到d3 topoJSON映射的.defer中。我的数据对象从后端API调用传递到前端JS文件。一旦进入前端,它就位于一个数据对象中,看起来像下面的变量数据集: var dataSet = [ {county: "021", county_name: "Franklin", county_TR_code: "53021", year: "2015", value: 7.5}, {county: "023", county_name: "Ga

在阅读了所有文档之后,我无法理解如何将内部json对象加载到d3 topoJSON映射的.defer中。我的数据对象从后端API调用传递到前端JS文件。一旦进入前端,它就位于一个数据对象中,看起来像下面的变量数据集:

var dataSet = [
{county: "021", county_name: "Franklin", county_TR_code: "53021", year: "2015", value: 7.5},
{county: "023", county_name: "Garfield", county_TR_code: "53023", year: "2015", value: 6.1},
{county: "025", county_name: "Grant", county_TR_code: "53025", year: "2015", value: 7.1},
{county: "027", county_name: "Grays Harbor", county_TR_code: "53027", year: "2015", value: 8.9},
{county: "029", county_name: "Island", county_TR_code: "53029", year: "2015", value: 6},
{county: "031", county_name: "Jefferson", county_TR_code: "53031", year: "2015", value: 7.1}]
我已经能够只绘制华盛顿县的topoJSON地图,但是对于如何从我的rawData变量设置employmentData,我有点困惑。任何帮助都会很好,谢谢

D3代码如下:

// Retrieve data from API
var rawData = dataSet

// Define funcitons to find min and max of data set
var minValue = getMin(rawData)
var maxValue = getMax(rawData)
var step = (maxValue-minValue)/7


// create color range based on Min,Max and Step Value
var employment_domain = [minValue,0,0,0,0,0,0,0];
for(var i=1; i< employment_domain.length; i++){
  var tmp = (employment_domain[i-1] + step)
  employment_domain[i]= tmp
}
console.log('domain', employment_domain)

var employment_color = d3.scaleThreshold()
  .domain(employment_domain)
  .range(d3.schemeBlues[7])


var svg = d3.select("svg");
var path = d3.geoPath();

// Create variable to hold data 
// Dictionary of key value pairs {id: value} --> {censusBlockID: value}
var employmentData = d3.map();

// used to asynchronously load topojson maps and data
d3.queue()
  .defer(d3.json, "../maps/wa_counties.json") // load in topoJSON map data
  //
  .defer(rawData, function(d){
    console.log('d',d)
    employmentData.set(d.county_TR_code, +d.value) // (first refers to county code, second refers to employment value)
  } ) // load in data
  .await(ready) // create callback function

// Callback function
function ready(error, data){
  if (error) throw error;

  // if no error returned retrieve data from topojson file
  // used to refer to the features of the county data
  var county_data = topojson.feature(data, {
    type:"GeometryCollection",
    geometries: data.objects.tl_2016_53_tract.geometries
  });

  // identify projection and path
  var projection = d3.geoAlbersUsa()
    .fitExtent([[20,20], [460, 580]], county_data) // assigns ([padding], [width and height], dataObject)

    // define path
    var geoPath = d3.geoPath()
      .projection(projection)

    // draw map
    d3.select("svg.main_data_point").selectAll("path")
      .data(county_data.features) //pass in data
      .enter()
      .append("path")
      .attr("d", geoPath) // pass in geoPath object created
      .attr("fill", function(d){
        return employment_color(d.value = employmentData.get(d.properties.GEOID)); // pass in employement value and ID from topoJSON map
      }) // fill in the data


}
//从API检索数据
var rawData=数据集
//定义函数以查找数据集的最小值和最大值
var minValue=getMin(原始数据)
var maxValue=getMax(原始数据)
变量步长=(最大值最小值)/7
//基于最小值、最大值和步长值创建颜色范围
var就业领域=[minValue,0,0,0,0,0,0];
对于(变量i=1;i{censusBlockID:value}
var employmentData=d3.map();
//用于异步加载topojson映射和数据
d3.队列()
.defer(d3.json,“../maps/wa_countries.json”)//加载topoJSON地图数据
//
.延迟(原始数据,函数(d){
console.log('d',d)
employmentData.set(d.country\u TR\u code,+d.value)/(第一个是指县代码,第二个是指就业值)
})//加载数据
.await(ready)//创建回调函数
//回调函数
功能就绪(错误、数据){
如果(错误)抛出错误;
//如果没有返回错误,请从topojson文件检索数据
//用于参考县数据的特征
var country_data=topojson.feature(数据{
类型:“GeometryCollection”,
几何图形:data.objects.tl_2016_53_tract.geometrics
});
//确定投影和路径
var projection=d3.geoAlbersUsa()
.fitExtent([[20,20],[460580]],county_data)//分配([padding],[width and height],dataObject)
//定义路径
var geoPath=d3.geoPath()
.投影(投影)
//绘制地图
d3.选择(“svg.main\u data\u point”).选择全部(“路径”)
.data(country_data.features)//传入数据
.输入()
.append(“路径”)
.attr(“d”,geoPath)//传入已创建的geoPath对象
.attr(“填充”,功能(d){
返回employment_color(d.value=employmentData.get(d.properties.GEOID));//从地图传入employment值和ID
})//填写数据
}
像这样使用

var data = d3.map();

yourinternaldata.forEach(function(d){
    console.log('d',d)
    data.set(d.code, +d.total) // (first refers to county code, second refers to employment value)
        })