https://www.cnblogs.com/bester-ace/articles/10948793.html

https://www.cnblogs.com/qingmingsang/articles/6040121.html

非本人自创

选择

d3.select - 从当前文档中选择一个元素。
d3.selectAll - 从当前文档中选择多个元素。
d3.event - 访问用于交互的当前用户事件。

selection.text - 取得或设置文本内容。
selection.style - 取得或设置样式属性。
selection.data - 在计算相关的连接时,取得或设置一组元素的数据。
selection.append - 创建并追加一个新元素。
selection.remove - 从当前文档中移除当前元素。
selection.attr - 取得或设置属性的值。
selection.call - 为当前选择调用一个函数。
selection.transition - 在选中元素上开启过渡。
selection.enter - 为缺失的元素返回占位符。( 绑定数据数量 > 对应元素 )
selection.exit - 返回不再需要的元素。( 绑定数据数量 < 对应元素 )
selection.on - 为交互添加或移除事件监听器。
selection.each - 为每个选中的元素调用一个函数。

比例尺

d3.scale.linear - 构建一个线性比例尺。
linear.domain - 取得或设置比例尺的定义域。
linear.range - 取得或设置比例尺的输出范围。

d3.scale.ordinal - 构造一个序数比例尺。
ordinal.rangeBand - 获取区间段的宽度。
ordinal.rangeRoundBands - 指定输出范围为连续区间,区间段的起点均为整数。

d3.scale.category10 - 构造一个有10种颜色的序数比例尺。
d3.scale.category20 - 构造一个有20种颜色的序数比例尺。

数组

d3.max - 找出一个数组中的最大值。
d3.min - 找出一个数组中的最小值。
d3.descending - 为排序比较两个值。
map.forEach - 为每个指定的实体调用一个函数。
d3.random.normal - 生成具有正态分布规律的随机数。
d3.random.normal 生成一个函数,这个函数能够按正态(高斯)分布随机生成数值。
要传入两个参数,第一个是位置参数,第二个是尺寸参数。

d3.svg.axis - 创建一个新的轴生成器。
axis - 为给定的选择器或过渡创建或者更新轴。
axis.scale - 设置或者取得比例尺。
axis.orient - 设置或者取得轴的方向。

过渡

d3.transition - 开启一个动画过渡。
transition.duration - 指定每个元素的持续时间(以毫秒为单位)。
transition.delay - 指定每个元素的延迟时间(以毫秒为单位)。
transition.ease - 指定一个过渡的缓动函数。
linear 普通的线性变化
circle 慢慢地到达变换的最终状态
elastic 带有弹跳的到达最终状态
bounce 在最终状态处弹跳几次

可视化图形

d3.layout.histogram - 构造一个新的默认的直方图布局。

histogram.bins - 指定值是如何组织到箱中的。
bins: 分隔数

histogram.frequency - 按频数或者频率计算分布。
frequency: 若值为 true,则统计的是个数;若值为 false,则统计的是概率

histogram.range - 取得或设置值得范围。
range: 区间的范围

d3.layout.pie - 构造一个新的默认的饼布局。
pie.startAngle - 取得或设置饼布局整体的开始角度。
pie.endAngle -取得或设置饼布局整体的结束角度。
pie.value - 取得或设置值访问器函数。

(D3 中的力学图布局是使用韦尔莱积分法计算的,这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中。)
d3.layout.force - 使用物理模拟排放链接节点的位置。
force.nodes - 取得或者设置布局的节点数组。(点)
force.links - 取得或者设置节点间的链接数组。(线)
force.start - 当节点变化时启动或者重启模拟。
force.drag - 给节点绑定拖动行为。
force.on - 监听在计算布局位置时的更新。
force.tick - 运行布局模拟的一步。

force.linkDistance - 取得或者设置链接距离。
指定结点连接线的距离,默认为20。
如果距离是一个常数,那么各连接线的长度总是固定的;
如果是一个函数,那么这个函数是作用于各连接线( source , target )的。

force.linkStrength - 取得或者设置链接强度。
指定连接线的坚硬度,值的范围为[ 0 , 1 ],值越大越坚硬。
其直观感受是:
值为1,则拖动一个顶点A,与之相连的顶点会与A保持linkDistance设定的距离运动
值为0,则拖动一个顶点A,与之相连的顶点不会运动,连接线会被拉长

force.size - 取得或者设置布局大小。
重力的重心位置为 ( x/2 , y/2 )
所有节点的初始位置限定为 [ 0 , x ] 和 [ 0 , y ] 之间(但并非之后也是如此)
如果不指定,默认为 [ 1 , 1 ] 。

force.friction - 取得或者设置摩擦系数。
定义摩擦系数的函数,值的范围为[ 0 , 1 ],默认为0.9。
但是这个值其实并非物理意义上的摩擦,其实其意义更接近速度随时间产生的损耗,这个损耗是针对每一个顶点的。
值为1,则没有速度的损耗。
值为0,则速度的损耗最大。

force.charge - 取得或者设置电荷强度。
设定引力,是排斥还是吸引,默认值为-30。
值为+,则相互吸引,绝对值越大吸引力越大。
值为-,则相互排斥,绝对值越大排斥力越大。

force.chargeDistance - 取得或者设置最大电荷距离。
设定引力的作用距离,超过这个距离,则没有引力的作用。
默认值为无穷大。

force.gravity - 取得或者设置重力强度。
以 size 函数设定的中心产生重力,各顶点都会向中心运动,默认值为0.1。
也可以设定为0,则没有重力的作用。
force.theta - 取得或者设置电荷作用的精度。
顶点数如果过多,计算的时间就会加大(O(n log n))。
theta 就是为了限制这个计算而存在的,默认值为0.8。
这个值越小,就能把计算限制得越紧。

force.alpha - 取得或者设置力布局的冷却参数。
设定动画运动的时间,超过时间后运动就会停止。
其实
force.start() 即 alpha(0.1)
force.stop() 即 alpha(0)

d3.layout.chord - 从关系矩阵生成一个弦图。
chord.padding - 取得或设置弦片段间的角填充。
chord.sortSubgroups - 取得或设置用于子分组的比较器。
chord.matrix - 取得或设置布局需要的矩阵数据。
chord.chords - 取回计算的弦角度。
chord.groups - 取回计算的分组角度。

d3.layout.cluster - 将实体聚集成树状图。
cluster.size - 取得或设置布局的尺寸。
cluster.nodes - 计算簇布局并返回节点数组。
cluster.links - 技术树节点之间的父子连接。
cluster.children - 取得或者设置子节点的访问器函数。

d3.layout.tree - 整齐地排列树节点。
tree.separation - 取得或设置相邻节点的间隔函数。

d3.layout.pack - 用递归的圆-包生成一个层次布局。
pack.radius - 指定节点半径(不是由值派生来的)

d3.layout.partition - 递归地将节点树分区为旭日图或者冰柱图。

partition.sort - 控制兄弟节点的遍历顺序。
指定对同深度的节点进行排序的函数。
如果不排序,则按照默认顺序显示。
排序函数与JavaScript 相同:

```
function comparator(a, b) {
return b.value - a.value;
}
```

partition.size - 指定布局的尺寸。
如果是方形的:size( [ width , height ] )
如果是圆形的:size( [ 2 * Math.PI, radius * radius ] )// radius 为圆的半径

partition.value - 取得或设置用来指定尺寸的值访问器。
设定用哪一个值来表示节点大小。如:

function value(d) { return d.size; }

这样设定的话,用节点里的 size 值来表示节点的大小。

partition.children - 取得或设置孩子访问器。
指定表示子节点的字符串。
默认是:

function children(d) { return d.children; }

表示在 JSON 文件中,子节点的变量符号用 children 表示.

partition.links - 计算树节点中的父子链接。
将上述节点数组传入后,得到连接线的关系,
起点和终点分别存在 source 和 target 变量中。

partition.nodes - 计算分区布局并返回节点数组。
将根数据传入后,得到的节点的数组,每个节点添加8个参数:
parent - 父节点
children - 子节点
value - 表示节点的大小,由下面 value() 函数指定的值,父节点的值等于子节点值的和
depth - 节点的深度
x - 节点的x方向的坐标(不一定指x轴方向,跟据 size() 函数的意义而定)
y - 节点的y方向的坐标(同上)
dx - x方向扩展的宽度(同上)
dy - y方向扩展的宽度(同上)

svg形状

d3.svg.arc - 新建一个弧度生成器。
arc.innerRadius - 获取或设置内半径访问器。
arc.outerRadius - 获取或设置外半径访问器。
arc.centroid - 计算弧中心。

d3.svg.diagonal - 新建一个对角线生成器。
diagonal.projection - 设置或获取一个可选的点转换。

请求

d3.json - 请求一个JSON对象。
d3.csv - 请求一个CSV(逗号分隔值)的文件。
d3.tsv - 请求一个TSV(制表符分隔值)的文件。

CSV格式化

d3.dsv - 为指定的分隔符和mime类型创建一个解析器/格式化器。

地理

GeoJSON

GeoJSON是一种对各种地理数据结构进行编码的格式,
基于Javascript对象表示法的地理空间信息数据交换格式。
GeoJSON对象可以表示几何、特征或者特征集合。
GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。
GeoJSON里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。

除了GeoJSON D3还支持 TopoJSON

d3.geo.path - 创建一个地理路径生成器。
path.centroid - 计算给定要素的投影中心。
d3.geo.mercator - 球形墨卡托投影。
projection - 投影指定的位置。
projection.center - 取得或设置投影的中心位置。
projection.scale - 取得或设置投影的缩放系数。
projection.translate - 取得或设置投影的平移位置。

几何

d3.geom.voronoi - 用默认的访问器创建一个泰森多边形布局。
voronoi.triangles - 计算Delaunay mesh为一个三角形密铺。

行为

d3.behavior.drag - 创建拖动行为。
drag.origin - 设置拖动行为的原点。
drag.on - 监听拖动事件。
dragstart、dragend、drag。

d3.behavior.zoom - 创建缩放行为。
zoom.scaleExtent - 可选参数,比例因子范围。
zoom.scale - 当前的比例因子。
zoom.on - 事件监听器。

data 与 datum 的区别

    datum():将指定数据赋值给被选择元素。
data():将数据数组与选择集的元素结合。

同样绑定3位的数组

datum:

对于选择集中的每一个元素,都为其增加一个__data__属性,属性值为datum(value)的参数value。
此处的value并非一定要是number(数值)型,
也可以是string(字符串)、boolean(布尔型)和object(对象),
无论是什么类型,其工作过程都是给__data__赋值。
如果使用undefined和null作为参数,则将不会创建__data__属性。

在被绑定数据的选择集中添加元素后,新元素也会具有被绑定数据。

    d3_selectionPrototype.datum = function(value) {
return arguments.length
? this.property("__data__", value)
: this.property("__data__");
};

data

 
 
 
 
 

D3属性大全的更多相关文章

  1. firemonkey中stringgrid属性大全

    StringGrid之属性大全: Align:                            //确定组件在父类组件区内的对齐方式(alScale:随窗口 放大缩小) AlterRowBack ...

  2. (转)TextView属性大全

    TextView属性大全 今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符 ...

  3. Android(java)学习笔记88:TextView属性大全

    TextView属性大全: android:autoLink       设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...

  4. ehcache.xml 属性大全

    属性大全 name:缓存名称. maxElementsInMemory:缓存最大个数. eternal:对象是否永久有效,一但设置了,timeout将不起作用. timeToIdleSeconds:设 ...

  5. Android:layout属性大全

    Android layout属性大全 第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中android:layout_centerVert ...

  6. angular常用属性大全

    Angular元素属性大全 addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元 ...

  7. HTML标签及属性大全

    HTML标签及属性大全 基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</ ...

  8. ASP.NET控件属性大全

    ASP.NET控件属性大全 DataGridView 控件DataGridView 控件提供用来显示数据的可自定义表.使用 DataGridView 类,可以自定义单元格.行.列和边框. 注意Data ...

  9. Android(java)学习笔记27:TextView属性大全

    TextView属性大全: android:autoLink       设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...

随机推荐

  1. js的变量——基本类型保存在栈中,引用类型保存在堆中

    javascript的基本类型:Undefined,Null,Boolean,Number,String 引用类型:Object,Array,Function 基本类型值在内存中占据固定大小,被保存在 ...

  2. html5插件完成滚屏幕效果

    首先想要完成这样的效果要用到jquery-fullpage插件我们需要他的js文件和css样式文件如图  因为是jquery的插件所以我们还要导入jquery-min.js 在页面引入这些样式和插件 ...

  3. 小程序的数据存储,与Django等服务发送请求

    目录 官方文档 快速归纳 存取改删 1.wx存储数据到本地以及本地获取数 1.1 wx.setStorageSync(string key, any data) 存(同步) 1.2 wx.setSto ...

  4. 2019年高校微信小程序开发大赛学习笔记

    学做小程序(学堂在线笔记)一.传统布局 text-align:center //水平居中 margin-bottom: 60px //设置间距 二.弹性盒子布局 display:flex; flex- ...

  5. nuxt.js如何实现同级目录下建多个动态路由,并将链接设置.html后缀

    nuxt.js中如果在同级目录中建两个_xxxx.vue的动态路由文件,那么页面跳转始终是跳的一个页面,如何解决这个问题呢?下面举个栗子: 第一步:新建两个页面文件 第二步:在nuxt.config. ...

  6. 把 GitHub 放入口袋,“开箱”官方客户端

    GitHub 2019 开发者大会说要出的客户端,今天(2020.3.18)终于放出了下载.之前如果登记过的小伙伴应该也和我一样收到了下面样子的邮件: 好了,那么接下来我们就来"开箱&quo ...

  7. 「CSS」常见的清除浮动方法

    下面介绍几种清除浮动的方案,供大家参考: 使用额外的标签clear:both .parent {padding: 10px;width: 200px;background: red;} .child ...

  8. (转)USB的VID和PID,以及分类(Class,SubClass,Protocol)

    USB的VID和PID,以及分类(Class,SubClass,Protocol) 原文地址:http://blog.csdn.net/gaojinshan/article/details/78783 ...

  9. watch 同步表单 记得$nextTick,否则不会同步更新到组件内

    watch 同步表单 记得$nextTick,否则不会同步更新到组件内 watch: { 'formData.aaa' (val) { this.$nextTick(() => { this.f ...

  10. ajax js分页算法分析

    显示效果:[页面总数小于等于10,全部显示,当前页特殊显示]上一页  1   2   3   4   5   6   7   8   9   10   下一页 [页面总数大于10,部分显示,当前页特殊 ...