5

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?

Martin Smithson
  • 111
  • 1
  • 5
  • 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 Jan 30 '15 at 16:56
  • 1
    It could be all those decimal places. You might try losing a few. – Robert Longson Jan 30 '15 at 17:37

2 Answers2

4

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!!!

Martin Smithson
  • 111
  • 1
  • 5
0

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

Srini Karthikeyan
  • 701
  • 8
  • 14