Question

我正在尝试美国郡的等值地图，我实际上是在这里使用Mike Bostock的例子https://bl.ocks.org/mbostock/4060606我使用的是教育而非失业，但除此之外它是相同。我想再添加一件，并显示县名和费率。但是，当我打电话给县名时，我得到了＆＃34; undefined＆＃34;回。要清楚＆＃39;率＆＃39;退货很好，县＃39;显示未定义。有人可以帮忙吗？谢谢！

＆＃13;

<!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>

＆＃13;

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的相同地图进行设置。解决方案是使用对象。或者，您可以使用两个地图，这似乎是最快的选择。

等值线图返回undefined

1 个答案: