1.
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("");
var p = d3.select("body")
.selectAll("p")
.text("");
p.style("color","red")
.style("font-size","72px");
</script>
</body>
</html>
2.绑定数据datum
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset=["I like dogs","I like cats","I like snakes"];
var body =d3.select("body");
var p=body.selectAll("p");
p.datum(dataset)
.text(function(d,i){
return d;
});
</script>
</body>
</html>
3.data
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset=["I like dogs","I like cats","I like snakes"];
var body =d3.select("body");
var p=body.selectAll("p");
p.data(dataset)
.text(function(d,i){
return d;
});
</script>
</body>
</html>
4.选择元素
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Apple</p>
<p id="myid">Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var body=d3.select("body");
var p1 = body.selectAll("p");
p1.style("color","red");
var p2=body.select("#myid");
p2.style("color","blue");
</script>
</body>
</html>
5.插入和删除
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Apple</p>
<p id="myid">Pear</p>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var body=d3.select("body");
body.append("p")
.text("append p element");
body.insert("p","#myid")
.text("insert p element");
var p=body.select("#myid");
p.remove();
</script>
</body>
</html>
6.柱形图
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width=1900;
var height=1900;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var dataset=[950,910,970,930,990];
var rectHeight=25;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
</script>
</body>
</html>
7.比例尺
线性比例尺：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset = [1.2,2.3,0.9,1.5,3.3];
var min=d3.min(dataset);
var max=d3.max(dataset);
var linear=d3.scale.linear()
.domain([min,max])
.range([0,300]);
var body=d3.select("body").append("p").text(linear(2.3));
linear(0.9);
linear(2.3);
linear(3.3);
</script>
</body>
</html>
序数比例尺：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var index=[0,1,2,3,4];
var color = ["red","blue","green","yellow","black"];
var ordinal=d3.scale.ordinal()
.domain(index)
.range(color);
var body=d3.select("body").append("p").text(ordinal(0));
</script>
</body>
</html>
柱形比例尺
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Banana</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset=[2.5,2.1,1.7,1.3,0.9];
var linear=d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,250]);
var rectHeight=25;
var width=300;
var height=300;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y",20)
.attr("x",function(d,i){
return i*rectHeight;
})
.attr("height",function(d){
return linear(d);
})
.attr("width",rectHeight-2)
.attr("fill","steelblue");
</script>
</body>
</html>
