摘要：
颜色和插值 计算机中的颜色，常用的标准有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也会和其他可视化库类似，只 阅读全文