您的位置：首页 > Web前端 > JavaScript

【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表

2017-05-27 10:13 429 查看

本人的个人博客为： www.ourd3js.com

csdn博客为：
blog.csdn.net/lzhlzz

转载请注明出处，谢谢。

前面几节解说了图标、坐标轴、比例等等。这一节整合这些内容做一个有用的图表。

结果图例如以下：

代码例如以下所看到的：

<html>
<head>
<meta charset="utf-8">
<title>Chart</title>
</head>

<style>

.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

.axis text {
font-family: sans-serif;
font-size: 11px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var width = 600;
var height = 600;
var dataset = [];
var num = 15;  //数组的数量

for(var i = 0; i < num ; i++){
var tempnum = Math.floor( Math.random() * 50 );   // 返回 0~49 整数
dataset.push(tempnum);
}

var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);

var xAxisScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,500]);

var yAxisScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([500,0]);

var xAxis = d3.svg.axis()
.scale(xAxisScale)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(yAxisScale)
.orient("left");

var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,500],0.05);

var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,500]);

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d,i){
return 30 + xScale(i);
} )
.attr("y",function(d,i){
return 50 + 500 - yScale(d) ;
})
.attr("width", function(d,i){
return xScale.rangeBand();
})
.attr("height",yScale)
.attr("fill","red");

svg.selectAll("text")
.data(dataset)
.enter().append("text")
.attr("x", function(d,i){
return 30 + xScale(i);
} )
.attr("y",function(d,i){
return 50 + 500 - yScale(d) ;
})
.attr("dx", function(d,i){
return xScale.rangeBand()/3;
})
.attr("dy", 15)
.attr("text-anchor", "begin")
.attr("font-size", 14)
.attr("fill","white")
.text(function(d,i){
return d;
});

svg.append("g")
.attr("class","axis")
.attr("transform","translate(30,550)")
.call(xAxis);

svg.append("g")
.attr("class","axis")
.attr("transform","translate(30,50)")
.call(yAxis);

</script>

</body>
</html>

以下分别解说上面的代码：

31 - 34 行：随机生成数据。赋于数组
36 - 38 行：定义 svg
40 - 54 行：定义坐标轴的 scale （比例）和坐标轴，48行为 x 轴，52行为 y 轴
56 - 62 行：定义柱形图的 scale
64 - 78 行：绘制柱形图，注意 scale 的使用
80 - 98 行：绘制文字标签。相同注意 scale
100 - 108 行：绘制坐标轴

注意：绘制的时候，要注意绘制的顺序。否则可能会把某些须要的东西覆盖掉。

尤其是坐标轴。最好放到最后绘制。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表