D3.js 学习( 一)

时间:2022-10-08 08:36:32
<html>
<head>
<meta charset="utf-8">
<title>第三课:为柱形图添加坐标轴</title> <style> .axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
} .axis text {
font-family: sans-serif;
font-size: 11px;
} .MyRect {
fill: steelblue;
} .MyText {
fill: white;
text-anchor: middle;
} </style> </head>
<body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var body = d3.select("body");
var width = 400;
var height = 400;
var svg = body.append("svg")
.attr("width", 400)
.attr("height", 400);
// 1. 比例尺 var xScale = d3.scale.ordinal()
.domain([0, 1, 2, 3, 4, 5, 6])
.rangeRoundBands([0,300]);//在300个像素上平均分配
console.info(xScale(1));
// 2. 坐标轴 x
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var gxAxis = svg.append("g")
.attr("class","axis")
.attr("transform","translate(30,300)")
.call(xAxis);
// 3. y轴
var yScale = d3.scale.linear()
.domain([100, 0])
.range([0, 250]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var gyAxis = svg.append("g")
.attr("class","axis")
.attr("transform","translate(30,50)")
.call(yAxis);
//绘制矩形
var dataset = [30, 20 , 10, 60, 50, 40, 33];
yScale.domain([0,100]);
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(30,50)")
.attr("x", function(d,i){
return xScale(i);
})
.attr("y", function(d){
return width - 150 - yScale(d);
})
.attr("width",function(){
return xScale.rangeBand() - 4;
})
.attr("height",function(d){
return yScale(d);
});
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(30,50)")
.attr("x", function(d,i){
return xScale(i);
})
.attr("y", function(d){
return width - 150 - yScale(d);
})
.attr("dx",function(){
return xScale.rangeBand()/2;
})
.attr("dy",function(d){
return 15;
})
.text(function(d){
return d;
});
</script> </body>
</html>