D3.js 画的折线图为什么不显示? 轩辕景红 提问于 2026-03-05 21:18:22 阅读 2 组件 我用 D3.js 画了个简单的折线图,数据都加载了,但页面上啥也没有,控制台也没报错,到底哪里出问题了? 我检查了 SVG 容器和路径生成逻辑,感觉没啥问题,但就是看不见线。是不是坐标算错了?还是 scale 设置有问题? <svg width="500" height="300"> <path d="M10,200 L100,150 L200,100" stroke="steelblue" fill="none"/> </svg> D3.js图表组件 我来解答 赞 1 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 程序猿红娟 Lv1 你这个情况我见多了,典型的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 加载更多 相关推荐 1 回答 43 浏览 为什么我的TypeScript项目用typedoc生成文档后JSDoc注释没显示? 我在Vue项目里用TypeDoc生成API文档,按文档写了JSDoc注释,但生成的HTML里参数说明就是不显示。试过检查注释格式,确认用了@param标签,还调整了typedoc.json的exclu... 玲玲(打工版) 前端 2026-02-18 01:24:28 1 回答 12 浏览 Dash.js播放HLS流时为什么一直卡在loading状态? 我用 Dash.js 尝试播放一个 HLS 流(其实是 .m3u8 链接),但页面一直显示 loading,控制台也没报错。明明这个链接在 VLC 里能正常播放,是不是我初始化方式有问题? 我试过设置... 慕容永穗 交互 2026-03-02 10:03:18 2 回答 32 浏览 为什么我的CSS文件在网络面板中总是比JS文件后加载? 在开发项目时发现页面加载时样式闪一下,检查Network面板发现styles.css显示完成时间比app.js还晚,但HTML里link标签确实在script标签前面: <link rel="s... 公孙爱玲 工具 2026-02-18 11:22:35 1 回答 30 浏览 Dash.js播放HLS视频时,视频封面无法居中显示怎么办? 用Dash.js播放HLS视频时,我给视频加了个封面图,但无论怎么调整CSS都无法让封面在不同分辨率下居中显示。我尝试过绝对定位配合transform,但加载视频时封面会突然跳到左上角。 这是我的CS... Dev · 春景 交互 2026-02-14 19:08:25 1 回答 28 浏览 Next.js中使用@font-face时,为什么字体在部分页面加载不全? 我在Next.js项目里用@font-face引入字体文件,首页显示正常,但其他动态路由页面的字体全变成默认样式了。已经把字体文件放在public/fonts目录,用绝对路径引用也试过了。 代码是这样... ♫翼杨 框架 2026-02-13 22:47:24 2 回答 30 浏览 为什么性能面板显示没有JS任务但帧率还是掉到30fps了? 我在用Performance面板调试一个轮播图动画,明明帧率经常掉到30fps左右,但火焰图里JS任务看起来都很短啊。我录了三次都这样,requestAnimationFrame里只做了简单的tran... 珊珊 工具 2026-02-11 09:09:36 1 回答 303 浏览 D3.js折线图坐标轴总偏移到角落怎么办? 在用D3.js画折线图时,坐标轴突然跑到svg左下角去了,明明之前代码没问题。我按照教程设置了margin对象,用scale()定义了范围,但y轴标签直接贴到y=0的位置,x轴完全看不见了。 尝试过调... a'ゞ柯豫 组件 2026-02-09 22:01:33 1 回答 3 浏览 D3.js 更新数据后图表不刷新怎么办? 我用 D3.js 画了一个柱状图,初始数据能正常显示,但当我用新数据调用更新函数时,柱子的高度没变。我已经用了 selectAll().data().enter().append() 这套流程,是不是... 慕容姝贝 交互 2026-03-05 16:35:19 1 回答 28 浏览 Next.js 的 loading.js 为什么有时候不生效? 我在用 Next.js 13 的 App Router,按照文档在页面文件夹里加了 loading.js,但有些路由切换的时候 Loading 组件根本不显示,是哪里没配对吗? 比如我从首页点进用户详... UX德丽 框架 2026-03-03 00:35:20 2 回答 11 浏览 HLS.js 播放时为什么总在切换清晰度后卡住? 我用 HLS.js 做了一个支持多码率切换的播放器,但每次手动切换清晰度(比如从 720p 切到 1080p)之后,视频就会卡住几秒甚至直接黑屏。控制台没报错,network 里看到新的 m3u8 和... 慕容炳光 交互 2026-03-01 21:40:23
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元素最终应用的样式。
建议改成这样测试:
加了灰色背景方便观察,如果还看不见就是坐标系问题了。另外建议先用硬编码数据测试,排除数据加载的问题。