摘要:
颜色和插值 计算机中的颜色,常用的标准有RGB和HSL。 RGB:色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色。三个通道的值得范围都是0~255,因此总共能表示16777216(255*255*255)种,即一千六百多万种颜色。几乎包括了人 阅读全文
摘要:
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图。 散点图(Scatter Chart),通常是一横一竖两个坐标轴,数据是一组二维坐标,分别对应两个坐标轴,与坐标轴对应的地方打上点。由此可以猜到,需要的元素包括c 阅读全文
摘要:
现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上。如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到。 还有数据都是自己定义的假数据,大家参考一下制作方法即可。 首先定义柱形图的数据、绘图区域的宽高、和上下左 阅读全文
摘要:
坐标轴(Axis) 坐标轴(Axis)在很多图表中都可见到,例如柱形图、折线图、散点图等。坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定。但是,如果使用SVG的直线和文字一笔一画的绘制坐标轴,工作量将会极其的大。D3提供了坐标轴的制作方法,需要之前所给大家讲的比例尺一起使用。开发者仅仅需要 阅读全文
摘要:
上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html。到目前所有的定量比例尺已经介绍完了。 现在给大家介绍一下序数比例尺。 定量比例尺的定义域都是连续的,值域有连续的也有离散的。序数比例尺(Ordinal Scale)的定义域 阅读全文
摘要:
定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数、指数函数、对数函数等,而指的是一个量随着另一个量的变化而变化。例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图形是一条直线,如果限制x的范围为[0,2],则可计算得到y的范围为[1,5]。x的范围[0,2]称为 阅读全文
摘要:
数组的处理 之 集合(set) 集合(Set)是数学中常用的概念,表示具有某种特定性质的事物的总体。集合里的项叫做元素。集合的相关方法有: d3.set([array]) //使用数组来构建集合,如果数组里有重复的元素,则只添加其中一项。 set.has(value) //如果集合中有指定元素,则返 阅读全文
摘要:
映射(Map) 映射(Map)是十分常见的一种数据结构,由一系列键(key)和值(value)组成的。每个key对应一个value,根据key可以获取和设定value,也可以根据key来查询value。 上面那个图展示了一个映射,该映射以每个值得id作为键,每个键对应一个值。 上面那个图展示了一个映 阅读全文
摘要:
首先需要下载安装d3.js : yarn add d3 然后在组建中引入 : import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子函数中调用即可。 然后如何绘制一个矢量图 : 先定义一个id为drawSVG的div标签。然后写一个方法, 阅读全文
摘要:
最近公司有需求要做一些可视化的功能。之前一直都是用Echarts做的,但是Echarts难以满足我们的需求,经过多方请教,查找发现D3可以满足我们的需求。第一次接触到D3,发现这些图标的可交互性非常丰富,而且动画流畅简洁。 所以,打算学习D3并且应用到项目中。 原本以为D3也会和其他可视化库类似,只 阅读全文