d3.js 地图无法在 Internet Explorer 或 Firefox 上呈现，只有 Chrome

Question

路径元素 d 属性是问题所在。在 Internet Explorer 中查看控制台时，它明确提到了

SVG4601：SVG 路径数据的格式不正确，不能 完全解析。

它似乎不是我正在使用的 geojson，因为它在以下小提琴中工作：http://jsfiddle.net/t9sd08q7/1/

这是检查每个浏览器上的 dom 元素时的输出。

铬：

Internet Explorer：

火狐：

这就是我生成路径的方式：

 function initialSetup() {
     internalScope.svg.selectAll("path").transition().duration(500).style("opacity", 0).remove();

     internalScope.width = width = internalScope.svg[0][0].offsetWidth;
     internalScope.height = height = 800;
     projection = d3.geo.albers()
                        .rotate(4.4, 0)
                        .parallels([50, 60])
                        .scale(1)
                        .translate([0, 0]);
     path = d3.geo.path()
                  .projection(projection); // default path based on our projection

     internalScope.svg.attr("height", "100%")
                      .attr("viewBox", "0 0 " + width + " " + height)
                      .attr("preserveAspectRatio", "xMidYMid meet"); // prevent default height messing up svg

     // Append an outer rectangle so when it's clicked it will also reset back to all features view
     internalScope.svg.append("rect")
         .attr("class", "background")
         .attr("width", "100%")
         .attr("height", "100%")
         .on("click", function () {
             //TODO clicking the empty space could potentially do some sort of reset on everything ?
         })
     ;

     var groupofSvgElements = internalScope.svg.append("g");

     return groupofSvgElements;
 }

我将“groupOfSvgElements”传递给另一个方法

我用来生成 d3.js 映射的提取代码（在 Angularjs 指令内）。

function renderCountries(matchCounts) {

     var promise = processJson(internalScope.json.uk_countries).then(function (json) {
         if (matchCounts) {
             json.features = matchFeaturesToLocationsWithCounts(json.features);
         }

         var projectionProperties = generateScaleTranslate(json, path, width, height);

         projection
             .scale(projectionProperties.scale)
             .translate(projectionProperties.translate);

         internalScope.groupofSvgElements.selectAll()
             .data(json.features)
             .enter()
             .append("path")
             .attr("id", function (d) {
                 if (d.properties.Name === 'Ireland') {
                     return "Ireland";
                 } else {
                     return "country";
                 }
             })
             .attr("class", function (d) {
                 if (isNaN(d.properties.Total) || d.properties.Total == 0) { // this covers instances where the capita average is NaN because of the maths or if the total job counts are just 0
                     return "map-feature map-shade-0";
                 } else {
                     return "map-feature " + internalScope.quantizeMethod(d.properties.Total);
                 }
             })
             .attr("d", path)
             .on("click", function (d) {
                 sendStats(d.properties);
                 updateLineChart(d);
                 internalScope.$apply();
                 console.log("hello, you clicked a Country with the count " + d.properties.Total);
             });
     }, function (error) {
         $log.error("Error when procession json file - Error : " + error);
     });

     return promise;
 }

我的 json 文件 - 真的不知道如何将它添加到小提琴或在这里分享。 http://jsonblob.com/5595338ce4b051e806c87b42

Answer 1

SVG4601：SVG 路径数据格式不正确，无法完全解析。

发生以下错误的原因可能有很多，在我的情况下，这是宽度传递给路径构造的方式。似乎 Chrome 比 Internet Explorer 更宽松。

调试此问题的最佳方法（如上述 cmets 中的 Ethan Jewett 所建议）是在我上传到 myjson.com 的 jsfiddle 中使用相同的 geojson。使用它的代码片段

d3.json("https://api.myjson.com/bins/4wkia", function (error, json) {

我认为这个问题的出现只是因为 SVG 并没有像它应该的那样在浏览器之间真正受到监管。关于导致问题的原因，并没有太多的错误信息。宽度对于路径生成无效，没有错误。调试它的唯一方法是一点一点地将我自己的代码添加到 jsfiddle 中。最后的 Jsfiddle : http://jsfiddle.net/t9sd08q7/11/