为了账号安全,请及时绑定邮箱和手机立即绑定

使用D3制作图表

LuckyYang 其它
难度中级
时长 1小时52分
学习人数
综合评分9.47
36人评价 查看评价
9.9 内容实用
9.3 简洁易懂
9.2 逻辑清晰

讲师回答 / LuckyYang
看一下这个文档就知道了:https://github.com/mbostock/d3/wiki/Selections#data

讲师回答 / LuckyYang
那样做为了生成数学坐标系下的矩形(rect),svg 函数中生成矩形需要知道几个变量:- 起始点坐标(x,y) 这里的 y 就是你问的- 矩形宽度- 矩形高度

已采纳回答 / 悠然的夜色
transform:rotate(7deg);-ms-transform:rotate(7deg);  /* IE 9 */-moz-transform:rotate(7deg);   /* Firefox */-webkit-transform:rotate(7deg);  /* Safari 和 Chrome */-o-transform:rotate(7deg);  /* Opera */

讲师回答 / LuckyYang
D3更灵活,你可以使用 D3做任何东西,不限于图表

讲师回答 / LuckyYang
http://codepen.io/luckyyang/pen/yubrv http://codepen.io/luckyyang/pen/lDcAF http://codepen.io/luckyyang/pen/CFJvw 这三种数据都不是使用数据文件的,你看看能不能帮助到你?

讲师回答 / LuckyYang
https://github.com/luckyyang/d3graphs 都在这里了,因为时间久了,如果代码有什么出入,随时告诉我,谢谢哈

最新回答 / qq_落尘_0
d3,不过这个视频比较基础

已采纳回答 / 程序媛ing
最后一行.attr("d",line_generator(data))中已经定义了,d代表着path的轨迹,d的值是用函数line_genrator()将数组data的数据传进来的。也就是说d的值就是数组的值。至于i,这个,我也在思考

讲师回答 / LuckyYang
你通过dev tool 看一下,应该是添加了两个g元素

最新回答 / qq_晓晓_7
把源码发过来看看

讲师回答 / LuckyYang
@暧月的猫 我这ubuntu+chrome没问题。如果你在chrome的developer tools下把你后添加的那个节点删除,svg的尺寸会恢复为0*0么?

讲师回答 / LuckyYang
其实还是沿着y轴平移的,看起来沿着x轴平移,是因为我上面把文字逆时针旋转了90度(rotete(-90))
课程须知
有html,css和javascript基础的同学学习这门课程会比较容易一些。没有基础的同学,也可以通过课程里面的例子加深自己对相关知识的理解。
老师告诉你能学到什么?
如何使用select和selectAll选择DOM元素、如何使用append添加DOM元素、如何使用line,area等方法生成图表曲线、如何使用数据文件让我们的图表可以随着数据变化而动态更新。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消