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 pletely parsed.

Inspecting the element, I can see that the path data is pletely 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?

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 pletely parsed.

Inspecting the element, I can see that the path data is pletely 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?

• javascript
• svg
• d3.js

• 2 Can you log what the d attribute is being set to (rather than looking at the post-sanitized version that Chrome parsed)? Can you show us any way to reproduce the problem ourselves? Have you tried to pare it down to a minimal reproducible test case? This is an interesting problem, but with no additional information I give you -1 until you edit with more information. As it stands, we can only make wild guesses. – Phrogz Commented Jan 30, 2015 at 16:56
• 1 It could be all those decimal places. You might try losing a few. – Robert Longson Commented Jan 30, 2015 at 17:37

2 Answers 2

After much debugging, I found the culprit in some code pletely 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!!!

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