D3.js 画的折线图为什么不显示?

轩辕景红 阅读 2

我用 D3.js 画了个简单的折线图,数据都加载了,但页面上啥也没有,控制台也没报错,到底哪里出问题了?

我检查了 SVG 容器和路径生成逻辑,感觉没啥问题,但就是看不见线。是不是坐标算错了?还是 scale 设置有问题?

<svg width="500" height="300">
  <path d="M10,200 L100,150 L200,100" stroke="steelblue" fill="none"/>
</svg>
我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
程序猿红娟
你这个情况我见多了,典型的D3.js"默默不显示"问题。我帮你捋一下常见的坑点:

1. 首先看SVG容器,你代码里写了固定宽高500x300,这个没问题。但你的path路径坐标都在200以内,应该能看见才对。

2. 关键点来了:检查SVG的viewBox设置。你没设置的话,默认就是0 0 width height。你的路径是从(10,200)开始的,但SVG坐标系y轴是向下的,200在300的高度范围内,理论上是能显示的。

3. 另一个常见问题是stroke宽度,你设置了颜色但没设置宽度,默认是1px可能太细看不清。试试加上stroke-width="2"。

4. 最可能的原因:path的fill默认是黑色!你虽然设置了fill="none",但确认下代码真的生效了吗?建议打开开发者工具直接检查DOM,看看path元素最终应用的样式。

建议改成这样测试:





加了灰色背景方便观察,如果还看不见就是坐标系问题了。另外建议先用硬编码数据测试,排除数据加载的问题。
点赞
2026-03-05 21:19