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 容器添加路径后，为什么路径无法正确显示？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
343
收藏
