我正在尝试绘制美国各县的分区统计图，并且基本上使用此处的 Mike Bostock 的示例 https://bl.ocks.org/mbostock/4060606我用的是教育而不是失业，但除此之外都是一样的。我想再添加一件，并显示县名和费率。但是，当我调用县名时，我得到“未定义”返回。需要明确的是，“费率”返回得很好，“县”显示为未定义。有人可以帮忙吗？谢谢!
<!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>最佳答案
您的代码中有两个问题。
代码中的第一个问题如下:
Bachelor.set(d.id, d.rate, d.county);
在 javascript maps 中和 D3 map (略有不同)，您不能为同一个键设置两个值。因此，语法必须是:
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 的属性(使用您的 map )...
.attr("fill", function(d) { return color(d.rate = Bachelor.get(d.id)); })
//you set 'rate' to the datum here --------^
...但您从未设置名为country 的属性。因此，没有这样的属性可供您在回调中使用。
如上所述，您无法使用用于设置费率的同一 map 来设置它。解决方案是使用对象来代替。或者，您可以使用两个 map ，这似乎是最快的选择。
关于javascript - 等值线图返回未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46509772/