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 容器的高度和宽度，而不是使用百分比（例如 100%）。具体如下：

svgContainer.setAttribute("width", "400");
svgContainer.setAttribute("height", "300");

这为 SVG 设置了具体的大小，并确保路径元素的坐标与容器边界对齐。

更新后的代码如下：

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

通过将 SVG 的 viewBox 设置为具体的大小，可以确保路径元素与 SVG 容器正确对齐，从而正确显示。

以上就是d3.js 向 SVG 容器添加路径后，为什么路径无法正确显示？的详细内容，更多请关注其它相关文章！