javascript – d3js v5 Topojson v3地图无法渲染

2023年2月1日 258次阅读

我不知道为什么,根据topojson版本(可能)我有：

TypeError: t is undefined

解释可能很好！ (我使用的是topojson的最新版本.)

这里的TypeError示例未定义(指向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的另一个例子是未定义的(指向topojson文件)

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

最佳答案 这两个例子与topojson有两个不同的问题.

在第一个示例中,由于文件的提取方式发生了变化,因此更新了topojson从我们这里持有的地方[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的变量,你有正确的.但是,对象不是弧形.保存topojson的变量有一个名为objects的属性,并且总是至少有一个属性表示一个特征集合(状态,县等).这个对象(或其中一个对象)就是我们想要的.

以下是topojson的片段：

…“objects”：{“dep_GEN_WGS84_UTF8”：{“type”：“GeometryCollection”,“geometry”：[{“arcs ……”

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

如果使用mapshaper等工具制作topojson,我们要显示的对象与用于创建它的文件的名称相同.通常,通过topojson快速搜索“对象”也可以很快地找到正确的对象.

topojson中的arcs属性可以方便地存储构成要素的部分,而不是要素本身.

更新plunkr.

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

点赞