如何使用内部数据对象D3 TOPOJSON地图使用.DEFER

Question

在阅读所有文档后，我无法理解如何将内部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变量设置就业时间有些困惑。任何帮助都很好，谢谢！

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

}

Answer 1

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)
        })

使用这样的使用