Question

我有一张美国州的地图，由fips代码识别并用topoJSON映射。

我还有一系列fips代码和人口data = [{fips: 1, pop: 2000}, {fips:2, pop: 3240}, etc.]

我正在尝试使用以下代码按人口对州进行着色。关于它为什么不工作的任何想法？

g.append("g")
  .attr("id", "states")
.selectAll("path")
  .data(state_features)
.enter().append("path")
.attr("d", path)
.attr("class", "state")
.style("fill", function(d) { 
     state = data.filter(function( obj ) { return obj.fips == d.id; })[0];
     return color(state.pop); })
.on("mouseover", tip.show)

svg.call(tip)

类似的想法适用于我的工具包：

var tip = d3.tip()
  .html(functioN(d, i) {
      state = data.filter(function( ob ) { return obj.fips == d.id;})[0]
      return state.pop;})

Answer 1

我相信你很亲密。如果您使用常规GeoJSON并将数据定义为data(state_features)，则fips键可能位于名为properties的集合中。如果是这种情况，您只需在properties之前添加fips，如下所示：

.style("fill", function(d) { 
   var state = data.filter(function( obj ) { return obj.properties.fips == d.id; })[0];
 return color(state.pop); })

这可以解释为什么states为undefined。

另外，在填充路径之前检查var data中是否有所有状态是个好主意，否则它将再次返回undefined。你可以这样做：

if (typeof state != 'undefined'){
  return color(state.pop);
} else {
  return someColorHere;
}

Answer 2

对于path，您应该使用attr函数和stroke属性：

g.append("g")
  .attr("id", "states")
.selectAll("path")
  .data(state_features)
.enter().append("path")
.attr("d", path)
.attr("class", "state")
.attr('stroke', function(d) { 
     var state = data.filter(function( obj ) { return obj.fips == d.id; })[0];
     return color(state.pop); })
.attr('stroke-width', 2)
.attr("fill", "none")
.on("mouseover", tip.show);

d3：由单独的数组组成的颜色

2 个答案: