CODEWITHSUNDEEP
javascriptsvgd3.js
Martin Smithson
Martin Smithson

Reputation: 111

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

I am rendering a line chart and have it working fine on FF and Chrome. When I run the same code on IE 11, however, my lines do not appear and get several hundred errors appearing in the console, like this:

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

Inspecting the element, I can see that the path data is completely missing:

  <path class="line"
        id="resource_statistics_chart1_summary_InitialMemoryInMB"
        clip-path="url("#resource_statistics_chart1_clip")"
        fill="#1f77b4"
        stroke="#1f77b4"
        transform=""
        d="" />

On Chrome, the same element looks as follows:

<path id="resource_statistics_chart1_summary_InitialMemoryInMB"
      class="line"
      clip-path="url(#resource_statistics_chart1_clip)"
      fill="#1f77b4"
      stroke="#1f77b4"
      d="M0,125L1050,10.714285714285717"
      transform="translate(0)">
</path>

Is anyone able to tell me what is happening in IE to cause this?

Upvotes: 5

Views: 6752

Answers (2)

Srini Karthikeyan
Srini Karthikeyan

Reputation: 782

I got this error due to the use of Date.parse() method in javascript.

Check this out:

Date constructor returns NaN in IE, but works in Firefox and Chrome

Date.parse failing in IE 11 with NaN

You can parse the date values in server-side or use third-party packages like moment.js to parse the date to the required format

Upvotes: 0

Martin Smithson
Martin Smithson

Reputation: 111

After much debugging, I found the culprit in some code completely unrelated to D3. I am using time scale on the x axis and have a utility method that I use to pull the date from the last item of dynamic data that has been pushed to the browser. This method retrieved the date from the last item as follows:

  item = resourceData[resourceData.length - 1];
  endTime = item.date;

Notice that I have not defined "item" as a var. This code works fine on FF and Chrome... but on IE, item ends up referencing a function!!! This results in item.date being undefined.

When I then try to set the range on my x axis I am specifing the following (with endTime being undefined):

  this._xRange.domain([startTime, endTime]);

Modifying the code to read as follows fixes the problem:

  var item = resourceData[resourceData.length - 1];
  endTime = item.date;

Rookie error!!!

Upvotes: 4

Related Questions