等值线图返回未定义

Question

我正在尝试绘制美国各县的等值线图，并且基本上使用此处的 Mike Bostock 示例 https://bl.ocks.org/mbostock/4060606 我使用的是教育而不是失业率，但其他方面是一样的。我想再添加一件，并显示县名和费率。但是，当我调用县名时，我得到 "undefined" 返回。要清楚 'rate' returns 就好了，'county' 显示为未定义。谁能帮忙？谢谢！

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
  fill: none;
  /*stroke: black;*/
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var Bachelor = d3.map();

var path = d3.geoPath();

var x = d3.scaleLinear()
    .domain([0, 70])
    .rangeRound([600, 860]);

var color_domain = [10, 20, 30, 40, 50, 60, 70]
var ext_color_domain = [10, 20, 30, 40, 50, 60, 70]
var color = d3.scaleThreshold()
    .domain(color_domain)
    .range([" #85c1e9", "#5dade2", "#3498db", "#2e86c1", "#2874a6", " #21618c"," #1b4f72"]);
var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("% of Adults with Bachelor's or higher");

g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x; })
    .tickValues(color.domain()))
  .select(".domain")
    .remove();

d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.tsv, "Bachelor2.tsv", function(d) { Bachelor.set(d.id, d.rate, d.county); })
    .await(ready);


function ready(error, us) {
  if (error) throw error;


  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("fill", function(d) { return color(d.rate = Bachelor.get(d.id)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return (d.county +" " d.rate +"%"); });

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
}

</script>

Answer 1

你的代码有两个问题。

您代码中的第一个问题在于：

Bachelor.set(d.id, d.rate, d.county);

在 javascript maps 和 D3 映射（略有不同）中，您不能为同一个键设置 两个值。因此，语法必须是：

map.set(key, value)

让我们展示一下。

这有效，将值 "bar" 设置为 "foo":

var myMap = d3.map();
myMap.set("foo", "bar");
console.log(myMap.get("foo"))

<script src="https://d3js.org/d3.v4.min.js"></script>

但是，这行不通：

var myMap = d3.map();
myMap.set("foo", "bar", "baz");
console.log(myMap.get("foo"))

<script src="https://d3js.org/d3.v4.min.js"></script>

如您所见，未设置值 "baz"。

这是假设 country 是 Bachelor2.tsv 文件中的属性。这给我们带来了第二个问题：

在您的路径中，这是数据：

topojson.feature(us, us.objects.counties).features

如果您查看您的代码，您会为该数据设置一个名为 rate（使用您的地图）的属性...

.attr("fill", function(d) { return color(d.rate = Bachelor.get(d.id)); })
//you set 'rate' to the datum here --------^

...但您从未设置名为 country 的属性。因此，没有这样的属性供您在回调中使用。

如上所述，您不能使用用于设置 rate 的同一张地图来设置它。一种解决方案是改用对象。或者，您可以使用两个地图，这似乎是最快的选择。

等值线图返回未定义

Choropleth map returning undefined

javascript

d3.js

choropleth