Question

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

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


}

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

这样使用

如何使用.defer与内部数据对象d3 topoJSON映射？

1 个答案: