访问topojson对象以更改d3.js中的地图国家/地区属性

Question

我正在构建一个Web应用程序，以显示世界各国之间的不同趋势和统计数据。使用d3，我可以加载topojson文件并投影世界地图。

  var countryStatistics = [];
  var pathList = [];

function visualize(){

var margin = {top: 100, left: 100, right: 100, bottom:100},
    height = 800 - margin.top - margin.bottom, 
    width = 1200 - margin.left - margin.right;

 //create svg
var svg = d3.select("#map")
      .append("svg")
      .attr("height", height + margin.top + margin.bottom)
      .attr("width", width + margin.left + margin.right)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  //load topojson file
d3.queue()
  .defer(d3.json, "world110m.json")
  .await(ready)  

var projection = d3.geoMercator()
  .translate([ width / 2, height / 2 ])
  .scale(180)

  //pass path lines to projection
var path = d3.geoPath()
.projection(projection);

function ready (error, data){
  console.log(data);

    //we pull the countries data out of the loaded json object
  countries = topojson.feature(data, data.objects.countries).features

    //select the country data, draw the lines, call mouseover event to change fill color
  svg.selectAll(".country")
    .data(countries)
    .enter().append("path")
    .attr("class", "country")
    .attr("d", path)
    .on('mouseover', function(d) {
      d3.select(this).classed("hovered", true)
        //this function matches the id property in topojson country, to an id in (see below)
      let country = matchPath(this.__data__.id);
      console.log(country)
    })
    .on('mouseout', function(d) {
      d3.select(this).classed("hovered", false)
    })
      //here I push the country data into a global array just to have access and experimentalism. 
    for (var i = 0; i < countries.length; i++) {
      pathList.push(countries[i]);
    } 
  }
};

matchPath（）函数用于允许我将路径数据与countryStatistics匹配，以便在删除某个国家/地区时显示。

function matchPath(pathId){
    //to see id property of country currently being hovered over
  console.log("pathID:" + pathId)
    //loop through all countryStatistics and return the country with matching id number
  for(var i = 0; i < countryStatistics.length; i++){
    if(pathId == countryStatistics[i].idTopo){
      return countryStatistics[i];
    }
  }
}

问题：这是有效的，但只能朝一个方向发展。我可以从每个topojson路径获取我的统计数据......但我无法根据数据到达和操纵各个路径。

我想要发生的是，有一个按钮可以从countryStatistics中选择某个属性，并构建一个域/范围缩放并根据数据值设置颜色渐变。我坚持的步骤是获取统计数据和路径数据接口。

我看到两种可能的解决方案

1：有一种方法可以在渲染过程中将拓扑路径数据连接到统计数据，我可以调用一个函数来重绘sgv ...

2：我构建了一个包含所有路径数据和统计数据的新对象。在这种情况下，我可以拔出topojson.objects.countries数据并忽略其余的数据吗？

我该怎么做到这一点？任何指针，下一步将不胜感激。

（我在这个项目的地方...... http://conspiracytime.com/globeApp）

Answer 1

TopoJSON是一个非常强大的工具。它有自己的CLI（命令行界面）来生成您自己的TopoJSON文件。

该CLI允许您使用拓扑和要合并的数据创建唯一文件。

即使它在v3.0.2中，first versión对我来说也很清楚。这是一个如何通过常见的csv属性将json文件与id合并的示例。

# Simplified versión from https://bl.ocks.org/luissevillano/c7690adccf39bafe583f72b044e407e8
# note is using TopoJSON CLI v1
topojson \
  -e data.csv \
  --id-property CUSEC,cod \
  -p population=+t1_1,area=+Shape_area \ 
  -o cv.json \
  -- cv/shapes/census.json

有一个带有data.csv列的cod文件和带有名为census.json的属性的CUSEC文件。 - 使用--id-property，您可以指定合并中将使用的属性。 - 使用物业-p，您可以动态创建新的属性。

这是一个可靠的解决方案，您可以使用一个唯一文件（带有一个唯一请求）来处理整个数据。这种最佳方案并非总是可行，因此另一种解决方案可能是下一种方案。

回到JavaScript，您可以通过以下方式创建一个可通过该属性访问的新变量。让您的数据格式为：

// countryStatistics
{
  "idTopo": "004",
  "country": "Afghanistan",
  "countryCode": "afg",
  // ..
},

而你的TopoJSON文件结构如下：

{"type":"Polygon","arcs":[[0,1,2,3,4,5]],"id":"004"},
{"type":"MultiPolygon","arcs":[[[6,7,8,9]],[[10,11,12]]],"id":"024"} // ...

这种情况的一个常见解决方案是创建一个可由Array访问的idTopo变量：

var dataById = [];
countryStatistics.forEach(function(d) {
    dataById[d.idTopo] = d;
});

然后，该变量将具有下一个结构：

[
    004:{
      "idTopo": "004",
      "country": "Afghanistan",
      "countryCode": "afg",
      //...
  },
    008: {
      //...
    }
]

从这里，您可以通过其idTopo属性访问属性，如下所示：

dataById['004'] // {"idTopo":"004","country":"Afghanistan","countryCode":"afg" ...}

您可以决定迭代Topo数据并将这些属性添加到每个功能：

var countries = topojson
  .feature(data, data.objects.countries)
  .features.map(function(d) {
    d.properties = dataById[d.id];
    return d
  });

或者在需要时使用此数组

// ...
.on("mouseover", function(d) {
  d3.select(this).classed("hovered", true);
  console.log(dataById[d.id]);
});