D3.js解析错误-正交地图投影的旋转答案

【问题标题】：D3.js parsing error - rotation of orthogonal map projectionD3.js解析错误-正交地图投影的旋转
【发布时间】：2013-06-28 02:42:03
【问题描述】：

我有一个世界地图的正交投影，在 D3 中并使用 TopoJSON。我通过调用此代码为每次加载数据的国家/地区着色。地球在不停地旋转。

我的问题是，在旋转过程中我收到错误消息：

错误

>> 错误：在 d3.v3.min.js:1 中解析 d="" >> 时出现问题

对于每个：

    .attr("d", path);

首先，我认为它取决于topojson脚本，因为有不同的版本。但它没有。

javascript代码：

初始化地球/投影的属性：

svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
    .attr("d", path);

...

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

从 json 和 tsv 读取数据并附加土地和国家：

queue()
    .defer(d3.json, "world-110m.json")
    .defer(d3.tsv, "world-country-names.tsv")
    .await(ready);

function ready(error, world, names) {

        var countries = topojson.feature(world, world.objects.countries).features,;
            i = -1,
            n = countries.length;

          countries.forEach(function(d) { 
            var tryit = names.filter(function(n) { return d.id == n.id; })[0];
            if (typeof tryit === "undefined"){
              d.name = "Undefined";
              console.log(d);
            } else {
              d.name = tryit.name; 
            }
          });

        var country = svg.selectAll(".country").data(countries);
        country
        .enter().insert("path", ".graticule")
          .attr("id", function(d){ 
                return "c" + d.id;  
          })
          .attr("d", path);

        svg.insert("path", ".graticule")
          .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
          .attr("class", "boundary")
          .attr("d", path);

    }

地球自转：

var velocity = .03,
    then = Date.now();

d3.timer(function() {  
    var angle = velocity * (Date.now() - then);  
    projection.rotate([angle,0,0]);  
    svg.selectAll("path")  
      .attr("d", path.projection(projection));  

});

【问题讨论】：

用一大段代码很难在 SO 上得到好的答案。你能把它缩小到引发错误的部分吗？哪条路径有问题？
哦，对不起。现在，我删除了一些我确定没有错误的行，并将代码分成几部分。也许，现在，它更具可读性：/
好的，所以对.attr("d", path) 的所有调用都失败了？这表明您没有绑定您期望的数据 - 尝试将 path 包装在一个函数中，以便您可以检查输入...

标签： d3.js map-projections topojson parsing-error

【解决方案1】：

这是一个已知的 WebKit 错误。我有同样的问题，它似乎不会以任何方式影响 svg 渲染。

clipAngle 之外的任何内容都分配了 d=""，我认为这应该是一个有效的空值，但会标记为错误。

【讨论】：

您可以通过暂时从投影中移除 clipAngle 来测试这一点。