D3
今天星期八
这个作者很懒,什么都没留下…
展开
-
D3.js(四)------------交互
制作柱状图的技巧有一些基本规则:避免使用 3D 效果;直观地排序数据点 - 按字母顺序或按数字排序;柱条之间保持一定距离;y 轴从 0 开始,而不是从最小值开始;使用统一的颜色;添加轴标签、标题、导引线。D3.js 网格系统在背景中添加栅格线突出那些值。垂直和水平的线都可以添加,但是建议是只添加一种。过多的线会分散注意力。以下代码片段演示了如何添加水平和垂直的栅格。a...原创 2019-12-23 15:13:15 · 717 阅读 · 0 评论 -
D3.js(三) ------- 散点图、气泡图、折线图
柱状图、折线图、散点图和气泡图都是较为相似的图标。一、散点图先看效果图,由图想到需要哪些知识点同折线图的坐标轴的实现是相同的.先用 d3.scaleLinear() 线性比例尺来创建比例尺再用 d3.axisBottom().scale() / var yAxis = d3.axisLeft().scale() 创建坐标轴并且设置对应的比例尺,最后 添加SVG元素并...原创 2019-12-17 11:23:47 · 2105 阅读 · 0 评论 -
D3.js(二) ------动画
D3 中的动效创建过度创建过度有两种方式;d3.transition 和 selection.transition, 它们都返回一个过度对象。前者是直接创建一个过度对象再指定作用对象,后者是通过作用对象创建过度。d3.transition([selection], [name])创建一个过度对象,参数是选择集。transition.delay([delay])设定延迟的时间...原创 2019-12-09 16:38:11 · 610 阅读 · 0 评论 -
D3.js(一) ------初识
D3.js简介D3.js是一个强大的数据可视化js语言,可以利用svg在网页上展示各种精美的矢量图.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输...原创 2019-12-06 18:16:49 · 3197 阅读 · 0 评论