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

【问题标题】：D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."D3：“SVG4601：SVG 路径数据格式不正确，无法完全解析。”
【发布时间】：2019-11-13 23:09:53
【问题描述】：

我正在渲染一个折线图，让它在 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 中发生了什么导致这种情况吗？

【问题讨论】：

您能记录下d 属性设置的内容（而不是查看 Chrome 解析的后清理版本）吗？你能告诉我们自己重现问题的任何方法吗？您是否尝试将其缩减为最小的可重现测试用例？这是一个有趣的问题，但在您使用更多信息进行编辑之前，我没有额外的信息给您 -1。就目前而言，我们只能做出疯狂的猜测。
可能是所有这些小数位。你可能会尝试失去一些。

标签： javascript svg d3.js

【解决方案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;

菜鸟错误！！！

【讨论】：

【解决方案2】：

由于在 javascript 中使用了 Date.parse() 方法，我收到此错误。

看看这个：

Date constructor returns NaN in IE, but works in Firefox and Chrome

Date.parse failing in IE 11 with NaN

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

【讨论】：