D3
Claroja
这个作者很懒,什么都没留下…
展开
-
D3 select&selectAll
<html> <body> <p>hello world</p> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script&原创 2018-04-09 15:16:06 · 11219 阅读 · 0 评论 -
d3 svg path 增强 symbol
原创 2018-05-09 09:48:12 · 1045 阅读 · 0 评论 -
d3 v5 api select
Selecting Elements(选择元素) 描述 英文 d3.selection 选择根节点 select the root document element. d3.select 选择一个节点 select an element from the document. d3.selectAll 选择多个节点 select m...翻译 2018-05-10 10:33:32 · 940 阅读 · 0 评论 -
d3 v5 api Axes
方法 描述 d3.axisTop 创建指向上方的坐标轴 d3.axisRight 创建指向右方的坐标轴 d3.axisBottom 创建指向下方的坐标轴 d3.axisLeft 创建指向左方的坐标轴 axis 从当前选取创建坐标轴 axis.scale 设置刻度 axis.ticks 设置刻度标签...翻译 2018-05-11 14:03:37 · 949 阅读 · 0 评论 -
d3 v5 api arrays
Statistics 基本的统计函数 d3.min compute the minimum value in an array. d3.max compute the maximum value in an array. d3.extent compute the minimum and maximum value in an array....原创 2018-05-11 14:56:31 · 283 阅读 · 0 评论 -
d3 v5 api shape.line
方法 描述 d3.line 创建一个线生成器 line 给所给数据集生成线 line.x 设置x存取器 line.y 设置y存取器 line.defined set the defined accessor. line.curve set the curve interpolator. line.con...翻译 2018-05-14 09:27:47 · 517 阅读 · 0 评论 -
d3 v4 api transitions
方法 描述 selection.transition 为选择的元素添加动画 selection.interrupt interrupt and cancel transitions on the selected elements. d3.transition schedule a transition on the root document ...翻译 2018-05-14 13:22:36 · 451 阅读 · 0 评论 -
D3 svg text标签控制
没有任何控制,text的锚点指向的左下的位置<html><body><script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script><svg id=zero width=300 height =300 ></svg><scr原创 2018-05-08 11:57:37 · 13008 阅读 · 0 评论 -
selection.text
d3.js selection.text 可以获得标签的内容,这个方法等同于js的原生方法 selection.node().innerHTML但是对于<input>标签,selection.text并不起作用,所以这个时候要使用js的原生方法, selection.node().value通过实验可知对于<input>标签,如果使用selection.at...原创 2018-06-13 18:03:36 · 640 阅读 · 0 评论 -
d3.scale
Scales continuous compute the range value corresponding to a given domain value. continuous.invert compute the domain value corresponding to a given range value. continuous.do...原创 2018-07-02 09:44:34 · 560 阅读 · 0 评论 -
d3 scale详解
domain是定义域,就是坐标系下的值 range是值域,就是映射到svg画布上的值 1.d3.scaleLinear() 线性比例尺 domain:连续型 range:连续型scale_l = d3.scaleLinear().domain([1,10]).range([0,100])线性比例尺超出定义域的部分会按映射拓展 2.d3.scaleBand() 序数比例尺 dom...原创 2018-07-02 10:26:04 · 7592 阅读 · 0 评论 -
d3 v4 api interpolate
方法 说明 d3.interpolate interpolate arbitrary values. d3.interpolateArray interpolate arrays of arbitrary values. d3.interpolateDate interpolate dates. d3.interpolateNumber...原创 2018-07-03 14:57:23 · 671 阅读 · 0 评论 -
transition.tween
对于每一个选择的元素插入帧,第一个参数是要改变的’attr’,’style’,’text’,第二个参数是一个函数。 对于每一个选择的元素会传入当前的datum ‘d’,索引 index 'i',当前的元素对象this,以及ease方法的时间t(范围是[0,1])更改填充属性transition.tween("attr.fill", function() { var node = th...原创 2018-07-03 15:28:45 · 495 阅读 · 0 评论 -
d3 选择元素 api
选择添加删除 函数 描述 select 选择一个元素 selectAll 选择多个元素 selection.order 排列选中元素 selection.sort 基于数据排列 selection.filter 过滤选择 selection.empty 是否为空 selection.size 选中...原创 2018-04-23 10:01:46 · 821 阅读 · 0 评论 -
d3 数组操作
js数组方法赋值方法 方法 描述 pop 删除末尾元素 shift 删除首位元素 push 末尾添加元素 unshift 首位添加元素 splice 指定位置添加删除元素 reverse 逆序排列 sort 数组排序取值方法 方法 描述 slice 切片...翻译 2018-04-23 09:45:31 · 4320 阅读 · 0 评论 -
D3 二次方曲线与切线
数据生成import jsondic = [{"x":i,"y":0.01*i*i} for i in range(-150,150,1)]json.dump(dic,open("./test.json","w"))d3展示<html><style>.axis path,.axis line{ fill: none; stroke: b原创 2018-04-10 18:19:03 · 792 阅读 · 0 评论 -
D3
SVG元素d3 select选择器 D3 插入删除元素元素 D3 绘制矩形 D3 加载数据 D3 Update,Enter,Exit D3 绑定数据 D3 比例尺 D3 刻度 D3 交互D3 svg text标签控制api d3 数组操作 d3 选择元素 api例子: D3 折线图 D3 二次方曲线与切线...原创 2018-04-09 15:16:49 · 362 阅读 · 0 评论 -
D3 datum&data
data()与datum() 在选择元素后(selcetAll)后,直接调用.data方法绑定数据. data绑定的是数组常用 datum绑定的是一个数,不常用在连缀方法中,只要调用 data() 了,就可以随时创建一个接收 d 为输入的匿名函数。与当前元素对应,方法 data() 确保了每个 d 都会被赋予原始数据集中的一个值。 随着 D3 遍历每个元素,“当前元素”的这个值也会跟着...原创 2018-04-09 15:25:51 · 2192 阅读 · 0 评论 -
D3 插入删除元素元素
插入元素 append():在选择集末尾插入元素 insert():在选择集前面插入元素<html> <body> <p>1</p> <p>2</p> <script src="http://d3js.org/d3.v3.min.js" ch原创 2018-04-09 15:32:00 · 2740 阅读 · 0 评论 -
D3 绘制矩形
<html> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 300; //画布的宽度 var原创 2018-04-09 15:38:52 · 4471 阅读 · 0 评论 -
D3 比例尺
D3 中的比例尺,定义域(domain)值域(range)会是一一对应的关系.使用比例尺可以根据盒子的大小来自适应图片的大小.var linear = d3.scale.linear()线性比例尺var dataset = [0,1,2,3,4,5,6,7,8,9];var min = d3.min(dataset);var max = d3.max(dataset);var...原创 2018-04-09 15:46:21 · 604 阅读 · 2 评论 -
D3 数轴
在 SVG 画布的预定义元素里,有七种基本图形:矩形,圆形,椭圆,线段,折线,多边形,路径. SVG还有g标签,意思是分组,group,可以将其他的容器进行组合.调用数轴函数并不会返回值,而是会生成数轴相关的可见元素,包括轴线、标签和刻度。var xAxis = d3.svg.axis();xAxis.scale(xScale); // 传入比例尺xAxis.orient("bo...原创 2018-04-09 16:08:58 · 788 阅读 · 1 评论 -
D3 Update,Enter,Exit
enter<html> <body> <p>1</p> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script>原创 2018-04-09 16:24:37 · 370 阅读 · 0 评论 -
D3 动态效果
transition().attr("fill","red") //初始颜色为红色.transition() //启动过渡.attr("fill","steelblue") //终止颜色为铁蓝色duration() 指定过度时间,单位毫秒delay() 延迟 duration(2000)ease() 过度方式,”li...原创 2018-04-09 16:39:26 · 2366 阅读 · 0 评论 -
D3 交互
<html> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 300; //画布的宽度 var原创 2018-04-10 08:59:04 · 346 阅读 · 0 评论 -
SVG元素
D3 最适合用来生成和操作 SVG(Scalable Vector Graphics,可伸缩矢量图形)创建svg画布var w = 500;var h = 50; //以后可以用来居中.attr("cy", h/2)var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个sv...原创 2018-04-10 10:26:01 · 514 阅读 · 0 评论 -
D3 加载数据
在加载数据之前先启动一个http服务python -m http.server1.加载csv数据错误示范 dataset异步被加载而不能及时使用,详见参考文献. Which is a aync call so initially nodes will be undefined because var nodes; gives nothing to it. During the ...原创 2018-04-10 11:00:45 · 1697 阅读 · 0 评论 -
D3 折线图
<html><style>.axis path,.axis line{ fill: none; stroke: black; shape-rendering: crispEdges;}.axis text { font-family: sans-serif; font-size: 11px;}path { fill:...原创 2018-04-10 13:47:12 · 1438 阅读 · 0 评论 -
d3 地图制作
d3中所需的json格式 geometry:几何形状, geometry-coordinates:就是path的具体内容 geometry-type:形状类型 properties:该path所具有的属性,可以放置我们在图上需要展示的数据 type:类别{ ‘geometry’: { ‘coordinates’: [], ‘type’: ...原创 2018-07-04 17:07:40 · 1099 阅读 · 0 评论