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

Question

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

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

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

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

镀铬

IE浏览器 ：

火狐：

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

 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宽容得多。

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