<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="d3.js"></script>
<title>柱状图</title>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;/*其中的shape-rendering属性是一个SVG属性，作用是让坐标轴和刻度线边缘更整齐*/
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<script type="text/javascript">
window.onload=function(){
<!-- ————————————————————————————制作柱状图———————————————————————————— -->
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15,20, 18, 17, 16, 18, 23, 25];//数据源
var width=500;
var height=100;
var barPadding =5; // 柱子间隔
var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
var rect=svg.selectAll("rect") .data(dataset).enter().append("rect")
.attr("x",function(d,i){return i * (width/dataset.length);}).attr("y",function(d){return height-d*4})
.attr("width",width/dataset.length - barPadding).attr("height",function(d){return d*4})
.attr("fill", function(d) {return "rgb(0, 0,"+(d * 10)+")"});
var text=svg.selectAll("text").data(dataset).enter().append("text").text(function(d){return d})
.attr("x", function(d, i) {return i * (width / dataset.length) + (width / dataset.length - barPadding)/2})
.attr("y", function(d) {return height - (d * 4) + 14;}).attr("font-family", "sans-serif")
.attr("font-size", "11px").attr("fill", "white").attr("text-anchor", "middle");
<!-- ————————————————————————————制作散点图———————————————————————————— -->
var dataArr = [
[11, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");
circle.attr("cx", function(d) {return d[0]}).attr("cy", function(d){return d[1]})
.attr("r", function(d) { return Math.sqrt(height - d[1])});
var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});
text.attr("x", function(d) {return d[0];}).attr("y", function(d) {return d[1];})
.attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");
<!-- ————————————————————————————制作尺度———————————————————————————— -->
//domain():设置尺度的输入范围，参数以数组的形式传入。
//range() :输出范围的设置
var padding =30;
var xScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[0]})]).range([padding, width-padding*2]);
var yScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([height-padding,padding]);
var rScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([2, 5]);
//__________________________散点图+尺度_________________________________
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");
circle.attr("cx", function(d) {return xScale(d[0])}).attr("cy", function(d){return yScale(d[1])})
.attr("r", function(d) { return rScale(d[1])});
var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});
text.attr("x", function(d) {return xScale(d[0])}).attr("y", function(d) {return yScale(d[1])})
.attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");
<!-- ————————————————————————————制作坐标轴 axis()———————————————————————————— -->
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5); //设置x轴
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);//设置Y轴
svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (height - padding) + ")").call(xAxis);
svg.append("g") .attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);
}
</script>
</head>
<body>
</body>
</html>