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

Question

我正在渲染折线图，让它在FF和Chrome上运行良好。 但是，当我在IE 11上运行相同的代码时，我的行不会出现，并且在控制台中出现数百个错误，如下所示：

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

检查元素，我可以看到路径数据完全丢失：

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

在 Chrome 上，相同的元素如下所示：

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

有谁能告诉我IE中发生了什么导致这种情况？

Answer 1

经过大量调试，我发现罪魁祸首出现在一些与 D3 完全无关的代码中。 我在 x 轴上使用时间刻度，并有一个实用程序方法，用于从已推送到浏览器的最后一项动态数据中提取日期。 此方法从最后一项中检索日期，如下所示：

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

请注意，我尚未将"item"定义为变量。 这段代码在FF和Chrome上工作正常...但在IE上，项目最终引用了一个函数!! 这会导致 item.date 未定义。

然后，当我尝试在x轴上设置范围时，我指定以下内容（未定义结束时间）：

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

将代码修改为如下所示可解决此问题：

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

菜鸟错误!!

Answer 2

由于在

javascript中使用Date.parse（）方法，我得到了这个错误。

看看这个：

日期构造函数在IE中返回NaN，但在Firefox和Chrome中工作

Date.parse 在 IE 11 中使用 NaN 失败

您可以在服务器端解析日期值或使用第三方包（如 moment.js）将日期解析为所需的格式