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

Question

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?

Answer 1

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