D3.js：基础图表
饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v3.min.js">
</script>
<style>
</style>
</head>
<body>
<script>
var w = 300;
var h = 300;
var dataset = [ 5, 10, 20, 45, 6, 25 ];
var pie = d3.layout.pie();
var color = d3.scale.category10()
var outerRadius = w/2;
var innerRadius = w/3;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h)
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class","arc")
.attr("transform","translate("+ outerRadius +","+ outerRadius +")");
arcs.append("path")
.attr("fill",function(d, i){
return color(i);
})
.attr("d",arc);//将角度转化为弧度
arcs.append("text")
.attr("transform",function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor","middle")
.text(function(d) {
return d.value;
});
/*
d.value--引用的是 d.value 而不只是 d 。因为绑定的是饼图数据，所以不能再引用原始数组中的元素（ d ），而要引用对象数组中的值（ d.value ）
arc.centroid(d)图心（centroid ）就是通过计算得到的任何图形的中心点，无论是常规图形（比如正方形）还是极为不规则的图形（比如马里兰州的边境线）。
*/
</script>
</body>
</html>
柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v3.min.js">
</script>
<style>
</style>
</head>
<body>
<script>
var w = 500;
var h = 300;
/*原始数据
var dataset = [
{ apples: 5, oranges: 10, grapes: 22 },
{ apples: 4, oranges: 12, grapes: 28 },
{ apples: 2, oranges: 19, grapes: 32 },
{ apples: 7, oranges: 23, grapes: 35 },
{ apples: 23, oranges: 17, grapes: 43 },
]
*/
//数组重组
var dataset = [
[
{x: 0, y: 5 },
{x: 1, y: 4 },
{x: 2, y: 2 },
{x: 3, y: 7 },
{x: 4, y: 23}
],
[
{x: 0, y: 10},
{x: 1, y: 12},
{x: 2, y: 19},
{x: 3, y: 23},
{x: 4, y: 17}
],
[
{x: 0, y:22},
{x: 1, y:28},
{x: 2, y:32},
{x: 3, y:35},
{x: 4, y:43}
]
];
var stack = d3.layout.stack();
stack(dataset);
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset[0].length))
.rangeRoundBands([0, w], 0.05)
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d) {
return d3.max(d,function(d) {return d.y0 + d.y});
})])
.range([0, h]);
var colors = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.style("fill", function(d, i){return colors(i);});
var rects = groups.selectAll("rect")
.data(function(d) {return d; })
.enter()
.append("rect")
.attr("x", function(d, i){return xScale(i)})
.attr("y", function(d, i){return yScale(d.y0)})
.attr("height", function(d){return yScale(d.y)})
.attr("width", xScale.rangeBand());
</script>
</body>
</html>
力导向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v3.min.js">
</script>
<style>
</style>
</head>
<body>
<script>
var w = 500;
var h = 300;
var dataset = {
nodes:[
{ name: "Adam" },
{ name: "Bob" },
{ name: "Carrie" },
{ name: "Donovan" },
{ name: "Edward" },
{ name: "Felicity" },
{ name: "George" },
{ name: "Hannah" },
{ name: "Iris" },
{ name: "Jerry" }
],
edges:[
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 1, target: 5 },
{ source: 2, target: 5 },
{ source: 2, target: 5 },
{ source: 3, target: 4 },
{ source: 5, target: 8 },
{ source: 5, target: 9 },
{ source: 6, target: 7 },
{ source: 7, target: 8 },
{ source: 8, target: 9 }
]
};
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w,h])
.linkDistance([50])//结点的连线长度
.charge([-100])//负电荷，排斥程度
.start();
var colors = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//创建连接直线
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill",function(d, i){
return colors(i);
})
.call(force.drag);
force.on("tick",function(){
edges.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
});
</script>
</body>
</html>
力导向很好玩呀~