使用 d3.js 在 SVG 中添加路径为何会显示异常？

d3.js 添加路径到 svg 容器中显示异常的原因

在使用 d3.js 向 SVG 容器中添加路径元素时，如果出现路径无法正确显示的情况，可能有以下原因：

代码示例：

function createPath(){
  var svgContainer = $("#svg_container").get(0)
  var svg = d3.select(svgContainer);
  svg.append("path")
      .attr("d",'M 50 245 L 150 245')
      .attr("stroke","black")
}

问题原因：SVG 视口（viewBox）设置不当

SVG 视口属性定义了 SVG 内容的显示区域。如果您将视口设置为 100%，则它可能无法正确显示路径。这是因为 100% 相对于 SVG 容器的父元素大小，而容器本身可能没有特定的高度或宽度。

解决方法：

将视口设置为具体的高度和宽度。例如，您可以使用以下代码设置视口：

svg.attr("viewBox", "0 0 200 500");

其中 200 和 500 是 SVG 内容的宽度和高度。

以上就是使用 d3.js 在 SVG 中添加路径为何会显示异常？的详细内容，更多请关注其它相关文章！