Question

如何为 svg / path 节点设置无效的 d 值时，是否可以捕获或知道是否发生错误？

我尝试使用try / catch包装调用，但这不起作用：

try {
    dotArray[i][j] = dotG
        .append('path')
        .attr('d', 'waaa');
}
catch (error) {
    console.log('error handled');
}

永远不会执行捕获。 d3.js是否会吞下错误？

Answer 1

我的理解是这是一个浏览器SVG解析器错误而不是JavaScript错误。它不会引发JavaScript异常，因为JavaScript函数很好。

如果您需要测试路径的有效性，可以执行以下操作：

var body = d3.select('body');

var svg = body
        .append('svg')
        .attr('width', 0)
        .attr('height', 0);

var d1 = "NotaRealPath";
var d2 = "M0,0L100,100";

var path1 = svg.append('path')
  .attr('d', d1);

var path2 = svg.append('path')
  .attr('d', d2);

// is there any path data to parse here?
var isError1 = path1.node().pathSegList.length === 0;
var isError2 = path2.node().pathSegList.length === 0;


document.write(!isError1 ? "Good Path: " + d1 : "Bad Path: " + d1);
document.write("<br>");
document.write(!isError2 ? "Good Path: " + d2 : "Bad Path: " + d2);

<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

Answer 2

错误不是由Javascript代码生成的，而是由浏览器的渲染代码生成的。也就是说，您编写的代码完全有效，但浏览器无法解释您设置的值。

据我所知，由于Javascript代码执行正常，因此无法在Javascript中捕获此类错误。

如何处理`错误：<path>属性的值无效d =＆＃34; waaa＆＃34;`在d3.js中？

2 个答案: