【D3.js】
神以灵
渴望成为前端大神的一个noob~~~
(https://github.com/shenyiling)
展开
-
【d3.js】弦图
d3-弦图弦图主要用来展示节点之间的联系。主要包含两部分,节点部分和表示节点联系的弦部分,弦的粗细表示比重。使用场景:1.城市之间的人口流动比例。2.一群人的邮件交流比例。…画一个弦图,首先需要一个矩阵数据matrix,以二位数组表示,数组每一项都是一个节点,而matrix[i][j]表示第i个节点到第j个节点的流量。const matrix = [ [ 10, 20...原创 2020-01-11 19:28:38 · 1493 阅读 · 0 评论 -
d3.histogram直方图
直方图将离散的一组数据统计在多个不重叠的连续区间中,查看数据的分布情况。apihistogram(data)返回一个分箱数组,每个分箱中包含部分data中的数据,还包含三个额外的属性:length: 数据的个数 x0:分箱的最小值 x1:分箱的最大值。const histogram = d3.histogram() .domain([ 0, 100 ])const bins ...原创 2019-12-25 10:20:20 · 2130 阅读 · 0 评论 -
【D3.js】极坐标系下的柱状图
极坐标系的柱状图虽然标题是柱状图,但其实使用arc饼图生成器画得,所以感觉叫饼图也可以~~预览LIVE DEMOAPI使用到的部分apid3.scaleLinear线性比例尺,类似一个线性函数,通过domain属性定义输入域,range属性定义值域,例如:var x = d3.scaleLinear() .domain([10, 130]) .range(...原创 2019-06-04 09:06:39 · 2742 阅读 · 0 评论 -
d3.js力导向图使用详解
创建一个力导向图需要三个东西:仿真模拟系统节点力当然,一般我们也会创建links来连接两个节点仿真模拟系统中存在多个节点和多种类型的力,通过力控制节点的运动,每个节点都在多个力的作用下不断发生移动,直到系统趋于平衡。中间会发生多次tick事件,每次tick,仿真系统都会更新节点的位置,且系统的能量(alpha)也会逐渐降低,直到达到某个数值(alphaMin),整个图表就停止运动...原创 2019-09-12 23:42:22 · 11376 阅读 · 0 评论 -
d3.drag使用指南
创建一个可拖动的圆展示d3.drag的使用首先创建svg容器和一个circle元素:const width = window.innerWidthconst height = window.innerHeightconst svg = d3.select('body') .append('svg') .attr('width', width) .attr('h...原创 2019-09-16 09:45:18 · 5745 阅读 · 2 评论