d3js v5 + Topojson v3 地图不渲染

Question

不知道为什么，根据topojson版本（可能）我有：

TypeError: t is undefined

有解释就好了！（我用的是最新版本的topojson。）

这里一个TypeError的例子是undefined（指向topojson文件）

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

我的代码：https://plnkr.co/edit/EzcZMSEQVzCt4uoYCLIc?p=info

原始（d3js v4 + Topojson v2）：https://bl.ocks.org/mbostock/4060606

这里还有一个TypeError的例子是undefined（指向topojson文件）

我的代码：https://plnkr.co/edit/o1wQX3tvIDVxEbDtdVZP?p=preview

Answer 1

这两个例子有两个与拓扑相关的独立问题json。

在第一个示例中，由于获取文件的方式发生了变化，您将保留拓扑json 的位置从us 更新为us[0]。但是，您还没有完全更新代码以反映此更改：

原文：.data(topojson.feature(us, us.objects.counties).features)

问题中：.data(topojson.feature(us, us[0].objects.counties).features)

并修正：.data(topojson.feature(us[0], us[0].objects.counties).features)

已更新 plunkr。

然而，第二个例子中的问题有点不同。

topojson.feature 需要两个参数，一个拓扑和一个对象。拓扑是包含 json 的变量，您说得对。但是，对象不是arcs。保存 topojson 的变量有一个属性称为对象，并且总是会有至少一个属性代表一个特征集合（州、县等）。这个对象（或这些对象之一）就是我们想要的。

这是您的拓扑片断json：

... "objects":{"dep_GEN_WGS84_UTF8":{"type":"GeometryCollection","geometries":[{"arcs ..."

我们要topojson.feature(data,data.objects.dep_GEN_WGS84_UTF8).

如果用mapshaper等工具制作topojson，我们要显示的对象和创建它的文件名是一样的。通常，通过 topojson 快速搜索 "object" 也会让您很快找到正确的对象。

拓扑json中的弧属性便于存储构成特征的片段，而不是特征本身。

已更新 plunkr。

在这两种情况下，传递给 topojson.feature 的拓扑参数将不包含指定的功能，从而产生相同的错误。

d3js v5 + Topojson v3 地图不渲染

d3js v5 + Topojson v3 Map not rendering

javascript

d3.js

topojson