D3：“ SVG4601：SVG路径数据的格式不正确，无法完全解析。”

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”定义为 var。这段代码在 FF 和 Chrome 上运行良好...但在 IE 上，项目最终引用了一个函数！这会导致 item.date 未定义。

当我尝试设置 x 轴上的范围时，我指定以下内容（ endTime 未定义）：

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

将代码修改为如下即可解决问题：

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

菜鸟错误！！！