折线图 折现图可以使用svg折线元素 来定义一组相连的直线段,但是更推荐使用 和`path`元素组合使用,这样更加灵活。 构造一个新的线生成器,使用默认的 和`.y`设置x,y访问器函数。 stroke linecap 路径两端的形状。 属性值:butt | round | square | inh ...
分类:
其他好文 时间:
2019-06-13 00:57:13
阅读次数:
104
本篇以一个简单的demo示范一下在d3中实现曲线的区域填充。 clip path :创建一个只有元素的部分区域可以显示的剪切区域。显示clip path内部的区域,而外部的区域不可见。 区域填充也主要以 为基础来实现。 区域填充 1.1 先画一条曲线 2.2 添加一条水平的阈值线 3.3 填充阈值线 ...
分类:
其他好文 时间:
2019-06-13 00:48:30
阅读次数:
89
brush示例 以d3的一个brush进行叙述,示例见: https://bl.ocks.org/xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 应用情形: 当页面上有多个图时,况且每个图维护一份brush,互不影响。 js 类的基本结构: 参考自:https: ...
分类:
Web程序 时间:
2019-06-08 14:45:54
阅读次数:
125
本文参照了echarts罗列了几种常用的柱状图在d3中的画法 基本柱状图 使用d3直方图布局 d3的所有布局都不会帮你作图,只是帮你按需处理的数据。 使用 构造一组1000个具有贝茨分布规律并且在1~0的随机数,使用 直方图布局处理数据。统计数据在每个x轴频段出现的频率。然后作出柱状图。 处理后的数 ...
分类:
其他好文 时间:
2019-06-06 00:20:01
阅读次数:
108
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点。最后根据点生成voronoi图及其三角网。 下载地图geoJson文件 去网上下载要绘制地图的geoJson文件。 使用 加载地图文件,这里为了方便加载我把geoJson文件放在了js文件里。 绘制地图 绘制效果 附:d3颜色方案API ...
分类:
Web程序 时间:
2019-05-25 22:54:06
阅读次数:
405
Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 ...
分类:
其他好文 时间:
2019-05-20 21:27:49
阅读次数:
559
一 、 过渡的启动 启动过渡效果,与以下四个方法相关: d3.transition([selection],[name]) //创建一个过渡对象。但是由于每个选择集中都有transition()方法,可用d3.select("rect").transition()的方式来创建过渡,因此一般不直接用d ...
分类:
Web程序 时间:
2019-05-20 21:19:31
阅读次数:
298
弧生成器(Arc Generator) 弧生成器(Arc Generator)可凭借起始角度、终止角度、内半径、外半径等,生成弧线的路径,因此在制作饼状图、弦图等图表时很常用。 有四个访问器需要谨记:内半径访问器innerRadius()、外半径访问器outerRadius()、起始角度访问器sta ...
分类:
Web程序 时间:
2019-05-13 22:49:45
阅读次数:
562
线段生成器 与线段生成器相关的方法: d3.svg.line() //创建一个线段生成器。 line(data) //使用线段生成器绘制data数据。 line.x([x]) //设置或获取线段x坐标的访问器,即使用什么数据作为线段的x坐标。 line.y([y]) //同上。设置或获取y坐标的访问 ...
分类:
Web程序 时间:
2019-05-11 23:32:15
阅读次数:
388
颜色和插值 计算机中的颜色,常用的标准有RGB和HSL。 RGB:色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色。三个通道的值得范围都是0~255,因此总共能表示16777216(255*255*255)种,即一千六百多万种颜色。几乎包括了人 ...
分类:
Web程序 时间:
2019-05-10 23:16:45
阅读次数:
213