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

Question

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

SVG4601: SVG Path data has incorrect format and could not be completely parsed.

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

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

Chrome :

Internet 浏览器：

火狐：

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

 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" 传递给另一个方法 wh

我用来生成 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 文件 - 真的不知道如何将它添加到 fiddle 或在此处共享。 http://jsonblob.com/5595338ce4b051e806c87b42

Answer 1

SVG4601: SVG Path data has incorrect format and could not be completely parsed.

出现以下错误的原因可能有很多，在我的例子中，这是将宽度传递给路径构造的方式。看来 Chrome 比 Internet Explorer 宽容得多。

调试此问题的最佳方法（如 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/

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

d3.js Map not rendering on Internet Explorer or Firefox, Only Chrome

html

javascript

svg

geojson

d3.js