The fundamental knowledge of Node JS.
D3 JS
Java scirpt is an awesome language for Internface Design.
All Obejcts in JavaScirpt could be used as an argument to pass around.
Important Objects:
d3
var width = 500;
var height = 500;
svg obeject:
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
array:
var dataArray = [20, 40, 50, 60]
...
var bars = canvas.selectAll("rect")
.data(dataArray) //traverse over the array
.enter()
.append("rect")
.attr("width", function(d) {return d}) //note the annoymos function
.attr("height", 50)
.attr("y", function(d, i) {return i * 100});
scale:
var widthScale = d3.scale.linear()
.domain([0, 60])
.range([0, width]);
var color = d3.scale.linear()
.domain([0, 60])
.range(["read", "blue"])
var bars = canvas.selectAll("rect")
.data(dataArray) //traverse over the array
.enter()
.append("rect")
.attr("width", function(d) {return widthScale(d)}) //note the annoymos function
.attr("height", 50)
.attr("y", function(d, i) {return i * 100});
group: (group some svg objects together, and mainpulat on all elements of the group)
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
.append("g")
.attr("transform", "translate(20, 0)")
The three important states when binding data elements with DOM elements
DOM elements(rect, circle)
Data elements(xArray = [1, 2, 3, 5, 7])
The beautiful: mainpulate the DOM elements through the data elements
Three states:(when binding) for each DOM element and data element
1. DOM elements :< data elements (enter) : for the data element that do not bond to a DOM element
2. DOM elements :> data elements (exit) : for the DOM element that do not bond to a data element
3. DOM elements := data elements (update) : the element justly bond to a DOM element
Example:
var data = [10, 20];
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
update state and enter state:
var circle1 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 25)
var circles = canvas.selectAll("circle") //select all circles
.data(data)
.attr("fill", "red") // for data element "10" and circle1
.enter() // for data element "20"
.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("fill", "green")
.attr("r", 25);
Update state and exit state:
var data = [10];
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
var circle1 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 25)
var circle2 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 200)
.attr("r", 25)
var circles = canvas.selectAll("circle") //select all circles
.data(data)
.attr("fill", "red") // for data element "10" and circle1
.exit() // for circle2
.attr("fill", "blue")
Animation effects: Using transition
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
var circle = cavas.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 25)
circle.transition()
.duration(1500)
.attr("cx", 150)
.transition()
.attr("cy", 200)
.transition()
.attr("cx", 50)
Add event listener for animation:
circle.transition()
.duration(1500)
.attr("cx", 150)
.each("end", function() {d3.select(this).attr("fill", "red")})
//when the transition is over, change color
Loading External data (use properly with call back mechanism)
//when the load process finished, the "data" would be passed into the function
d3.json("mydata.json", function (data)) {
//the critical part is to understand how arguments were passed around
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d) { return d.age * 10; })
.attr("height", 50)
.attr("y", function(d, i) { return i * 50;})
.attr("fill", "blue")
canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill", "white")
.attr("y", function (d, i) { return i * 50; })
.text(function (d) {return d.name; })
}}
The powerfull "Path" Componet in D3.JS
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
var data = [
{x: 10, y: 20},
{x: 40, y: 60},
{x: 50, y: 70}
];
var group = canvas.append("g") //create a group over the canvas
.attr("transform", "translate(100, 100)");
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return d.y; })
group.selectAll("path")
.data([data]) //pass in as only one array
.enter()
.append("path")
.attr("d", line) //directly pass the data array to constract line.
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 10);
The powerful "Arc" Componet in D3.JS
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
var group = canvas.append("g")
.attr("transform", "translate(100, 100)");
var r = 100;
var p = Math.PI * 2;
var arc = d3.svg.arc()
.innerRadius(r - 20)
.outerRadius(r)
.startAngle(0)
.endAngle(p);
group.append("path")
.attr("d", arc)
Layout: D3JS has provieded convenient libraires for converting a number/array into a layout object(array).
Combine group, component and layout to create an awesome work.
***How to refer a group is very very important!
1. create container(document componet with proper group)
2. prepare data by using proper layout function
3. bind the data with container
var data = [10, 50, 80];
var r = 300;
var color = d3.scale.ordinal()
.range(["red", "blue", "orange"]);
var canvas = d3.select("body").append("svg")
.attr("width", 1500)
.attr("height", 1500);
var group = canvas.append("g") //create the canvas group
.attr("transform", "translate(300, 300)");
var arc = d3.svg.arc()
.innerRadius(200)
.outerRadius(r);
//convert the passed in array into into the objects for creating arc
var pie = d3.layout.pie()
.value(function (d) { return d; });
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g") //each arc is a group in the arcs group
.attr("class", "arc");
//note here, we use arcs to refer all arc contains in the arcs
//the same execution would be performed over all arcs
arcs.append("path")
.attr("d", arc) //we use arc as passed in object to constract the path
.attr("full", function (d) { return color(d.data);});
arcs.append("text")
.attr("transform", function(d) {return "translate(" + arc.centroid(d) +")"})
.attr("text-anchor", "middle")
.attr("front-size", "1.5em")
.text(function (d) {return d.data;});
The Tree Layout:
//Path could be used to create any sharp
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var diagonal = d3.svg.diagonal()
.source({x: 10, y: 10})
.target({x: 300, y: 300});
canvas.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", digonal) //all use pass as container, but depict based on passed in object
最新文章
- Delphi_01_控制台版HelloWorld
- 基于Bootstrap仿淘宝分页控件实现
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
- rancher 笔记 之 rancher应用中心
- HH去散步[SDOI2009]
- Java 第二周总结
- Java 多线程 - Synchronized关键字
- vue Element学习和问题处理
- CDialogEx::OnPaint()的问题,或者为什么在对话框程序的OnPaint中绘图无效的问题
- jquery ui autocomplete输入中文不自动完成的问题
- python爬虫训练——爬poj题目
- MySql详解(四)
- 分布式监控工具Ganglia 介绍 与 集群部署.
- checkbox的美化(转)
- 深度学习读书笔记之RBM(限制波尔兹曼机)
- Jenkins 默认没有Launch agent via Java Web Start,该如何配置
- CakePHP调用model类和foreach循环
- mysql 循环insert
- 【POJ 3177】Redundant Paths
- Android webView 支持缩放及自适应屏幕
热门文章
- freemarker if..else.. 的使用
- 【Android】数据的应用-使用sharedpreferences存储数据
- iOS的内存管理
- PHP错误类型及屏蔽方法
- 【Android】android镜像翻转
- memcached并发处理
- producer怎样发送消息到指定的partitions
- siege安装和使用
- EF 更新数据出现 System.Data.Entity.Infrastructure.DbUpdateConcurrencyException: 异常
- Base64的用法