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

Question

The path elements d attribute is where the problem is at. When looking at the console in Internet Explorer it explicitly mentions

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

It doesn't seem to be the geojson I'm using as it works in the following fiddle: http://jsfiddle.net/t9sd08q7/1/

Here are the outputs when inspecting into the dom elements on each browser.

Chrome :

Internet Explorer :

Firefox :

This is how I'm generating my path:

 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;
 }

I pass the "groupOfSvgElements" to another method wh

Extracted code that I'm using to generate the d3.js map (inside an Angularjs directive).

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;
 }

My json file - don't really know how to add it to a fiddle or share it here. http://jsonblob.com/5595338ce4b051e806c87b42

Answer 1

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

There can be many reasons the following bug occurs, in my case it was how the width was being passed to the path construction. It seems that Chrome is very lenient on a lot more than Internet Explorer.

The best way to debug this problem (as suggested by Ethan Jewett in the above comments) was to use the same geojson in a jsfiddle which I uploaded to myjson.com. Snippet of the code that uses it

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

I think this problem only occurs because SVG isn't really regulated across browsers as well as it should be. There's not really much error information either as to what is causing the problem. There was no error that the width was invalid for the path generation. Only way to debug this was to add bits of my own code to the jsfiddle little by little. Final Jsfiddle : http://jsfiddle.net/t9sd08q7/11/