d3js v5 + Topojson v3地圖未呈現

Question

我不知道為什么，根據topojson版本（可能是），我有：

TypeError：t未定義

一個解釋可能很好！ （我使用的是最新版本的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

Answer 1

這兩個示例與topojson有兩個不同的問題。

在第一個示例中，由於文件獲取方式的變化，您將topojson從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的變量具有一個稱為對象的屬性，並且將始終存在至少一個表示要素集合（州，縣等）的屬性。 這個對象（或這些對象之一）就是我們想要的。

這是您的topojson的片段：

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

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

如果使用諸如mapshaper之類的工具制作topojson，我們要顯示的對象與用於創建它的文件的名稱相同。 通常，通過topojson中的“對象”進行快速單詞搜索也會使您很快找到合適的對象。

topojson中的arcs屬性可以方便地存儲構成要素的片段，而不是要素本身。

更新了plunkr 。

在這兩種情況下，傳遞給topojson.feature的拓撲參數都不包含指定的功能，從而產生相同的錯誤。

d3js v5 + Topojson v3地圖未呈現

問題描述

1 個解決方案

解決方案1
1 已采納 2018-04-18 17:38:12

d3js v5 + Topojson v3地圖未呈現

問題描述

1 個解決方案

解決方案1 1 已采納 2018-04-18 17:38:12

解決方案1
1 已采納 2018-04-18 17:38:12