Javascript d3js v5+；拓扑图未渲染
我不知道为什么，根据topojson版本（可能是），我有： 类型错误：t未定义 一个解释可能很好！（我使用的是topojson的最新版本。） 这里的TypeError示例未定义（指向topojson文件）Javascript d3js v5+；拓扑图未渲染,javascript,d3.js,topojson,Javascript,D3.js,Topojson,我不知道为什么，根据topojson版本（可能是），我有： 类型错误：t未定义 一个解释可能很好！（我使用的是topojson的最新版本。） 这里的TypeError示例未定义（指向topojson文件） var svg=d3。选择（“svg”）， 宽度=+svg.attr（“宽度”）， 高度=+svg.attr（“高度”）； var=d3.map（）； var path=d3.geoPath（）； var x=d3.scaleLinear（） .domain（[1,10]） .rangeRo
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var=d3.map（）；
var path=d3.geoPath（）；
var x=d3.scaleLinear（）
.domain（[1,10]）
.rangeRound（[600860]）；
var color=d3.scaleThreshold（）
.域（d3.范围（2,10））
.范围（d3.模式值[9]）；
var g=svg.append（“g”）
.attr（“类”、“键”）
.attr（“转换”、“翻译（0,40）”）；
g、 selectAll（“rect”）
.data（color.range（）.map）（函数（d）{
d=颜色。反相器范围（d）；
如果（d[0]==null）d[0]=x.domain（）[0]；
如果（d[1]==null）d[1]=x.domain（）[1]；
返回d；
}))
.enter（）.append（“rect”）
.attr（“高度”，8）
.attr（“x”，函数（d）{返回x（d[0]）；}）
.attr（“宽度”，函数（d）{返回x（d[1]）-x（d[0]）；}）
.attr（“fill”，函数（d）{返回颜色（d[0]）；}）；
g、 附加（“文本”）
.attr（“类”、“标题”）
.attr（“x”，x.range（）[0]）
.attr（“y”，-6）
.attr（“填充”、“千”）
.attr（“文本锚定”、“开始”）
.attr（“字体大小”、“粗体”）
.text（“失业率”）；
g、 调用（d3.axisBottom（x）
.尺寸（13）
.tickFormat（函数（x，i）{返回i？x:x+“%”；}）
.dock值（color.domain（））
.select（“.domain”）
.remove（）；
var文件=[”https://d3js.org/us-10m.v1.json“，“失业率.tsv”]；
var promises1=d3.json（“https://d3js.org/us-10m.v1.json");
var promises2=d3.tsv（“失业率tsv”）；
承诺。所有（[承诺人1，承诺人2]）。然后（功能（我们）{
console.log（us[0]）；
console.log（美国[1]）；
svg.append（“g”）
.attr（“类”、“县”）
.selectAll（“路径”）
.data（topojson.feature（美国，美国[0].objects.countries.features）
.enter（）.append（“路径”）
.attr（“fill”，函数（d）{returncolor（d.rate=demission.get（d.id））；}
.attr（“d”，路径）
.附加（“标题”）
.text（函数（d）{返回d.rate+“%”；}）；
追加（“路径”）
.datum（topojson.mesh（us，us[0].objects.states，函数（a，b）{返回a！==b；}））
.attr（“类别”、“状态”）
.attr（“d”，路径）；
});
我的代码：这两个示例有两个与topojson相关的独立问题 在第一个示例中，由于文件获取方式的改变，您将topojson的存放位置从
usus[0].data（topojson.feature（us，us.objects.countries.features）.data（topojson.feature（美国，美国[0].objects.countries.features）.data（topojson.feature（us[0]，us[0].objects.countries.features）然而，第二个例子中的问题有点不同
topojson.feature弧。。。“对象”：{“dep_GEN_WGS84_UTF8”：{“类型”：“GeometryCollection”，“几何体”：[{“arcs…”topojson.feature（数据，数据，对象，dep\u GEN\u WGS84\u UTF8）在这两种情况下，传递给
topojson.feature<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/d3@5.0.0/dist/d3.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>
</head>
<body>
<svg width="960" height="600"></svg>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var unemployment = d3.map();
var path = d3.geoPath();
var x = d3.scaleLinear()
.domain([1, 10])
.rangeRound([600, 860]);
var color = d3.scaleThreshold()
.domain(d3.range(2, 10))
.range(d3.schemeBlues[9]);
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("Unemployment rate");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(function(x, i) { return i ? x : x + "%"; })
.tickValues(color.domain()))
.select(".domain")
.remove();
var files = ["https://d3js.org/us-10m.v1.json", "unemployment.tsv"];
var promises1 = d3.json("https://d3js.org/us-10m.v1.json");
var promises2 = d3.tsv("unemployment.tsv");
Promise.all([promises1, promises2]).then(function(us){
console.log(us[0]);
console.log(us[1]);
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us[0].objects.counties).features)
.enter().append("path")
.attr("fill", function(d) { return color(d.rate = unemployment.get(d.id)); })
.attr("d", path)
.append("title")
.text(function(d) { return d.rate + "%"; });
svg.append("path")
.datum(topojson.mesh(us, us[0].objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
});
</script>
</body>
</html>