Question

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

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

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

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

Chrome： chrome_paths

Internet Explorer：

internetexplorer_paths

Firefox： enter image description here

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

 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。使用它的代码片段

import javax.swing.*
import java.awt.*

public class SampleDialog {
    public static void main(String[] args) throws EkmException {

        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                JDialog dialog = new JDialog();

                JPanel panel = new JPanel();
                JButton button = new JButton("Sample");
                panel.add(button);
                dialog.add(panel);

                doMaximized(dialog);
                dialog.setVisible(true);
            }
        }
    }
    public static void doMaximized(JDialog dialog) {
        //dialog.setExtendedState(...) - missing function

        //This will do good size, but without 'maximized' flag
        dialog.setSize(Toolkit.getDefatultToolkit().getSreenSize());
    }
}

我认为这个问题只会发生，因为SVG并不是真正受到浏览器的监管，而且应该是这样。关于造成问题的原因，没有太多的错误信息。没有错误，宽度对于路径生成无效。调试这个的唯一方法是将一些我自己的代码添加到jsfiddle中。最后的Jsfiddle：http://jsfiddle.net/t9sd08q7/11/

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

1 个答案: