【D3.js数据可视化实战】--(1)绘制网格线
2015-03-20 21:44
1161 查看
我们常常使用常规图表(直方图,折线图等)来表现数据。为了清楚的表示数据在数轴上的哪个数值区间,会直接在矩形和点上标注数值。
除了这个办法外,还可以使用色调偏淡的网格作为背景参照。
本文介绍了如何使用D3绘制网格线的小技巧:
2 给SVG分组,并设置分组的样式类。
3 为分组分别添加横线和竖线。
x线性比例尺,将数组的值映射为实际的像素值,例如:
.attr("width", w)
.attr("height",h);
.data(x.ticks(10))
.enter().append("g")
.attr("class", "grid");
.attr("x1", x)
.attr("x2", x)
.attr("y1", p)
.attr("y2", h - p - 1);
…
本例很简单,可以使用下面的代码测试效果,你学会了吗?
<html>
<head>
<metacharset="UTF-8" content="">
<title>linegrid</title>
<styletype="text/css">
//分组中线的样式,这里设置了颜色值,实际使用可以更淡,例如stroke: #ccc
.gridline {
stroke: #000;
}
</style>
<scripttype="text/javascript" src="d3.js"></script><!--下载到本地-->
</head>
</head>
<body>
<script type="text/javascript">
var data = d3.range(10);// (1) 生成一个10元素的数组
var w = 960,
h= 500,
p= 40,//内边距
x= d3.scale.linear().domain([0, 1]).range([p, w - p]), //(2) 定义x和y比例尺
y= d3.scale.linear().domain([0, 1]).range([h - p, p]);
//(3) 绘制SVG
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//(4) 给SVG添加分组,并设置样式类,样式见<style>标签中的设置
var grid = svg.selectAll(".grid")
.data(x.ticks(10))
.enter().append("g")
.attr("class", "grid");
//(5) 添加线条,设置起始坐标(x1,y1)和结束坐标(x2,y2)的值即可
//竖线
grid.append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", p)
.attr("y2", h - p - 1);
//横线
grid.append("line")
.attr("y1", y)
.attr("y2", y)
.attr("x1", p)
.attr("x2", w - p + 1);
</script>
</body>
</html>
除了这个办法外,还可以使用色调偏淡的网格作为背景参照。
本文介绍了如何使用D3绘制网格线的小技巧:
绘制效果:
思路很简单:
1 绘制SVG容器。2 给SVG分组,并设置分组的样式类。
3 为分组分别添加横线和竖线。
关键技术介绍
(1) 生成一个10元素的数组:
(2) 定义x和y比例尺
x = d3.scale.linear().domain([0,1]).range([p, w - p])x线性比例尺,将数组的值映射为实际的像素值,例如:
(3) 绘制SVG
var svg = d3.select("body").append("svg").attr("width", w)
.attr("height",h);
(4) 给SVG添加分组,并设置样式类
var grid = svg.selectAll(".grid").data(x.ticks(10))
.enter().append("g")
.attr("class", "grid");
(5) 添加线条
grid.append("line").attr("x1", x)
.attr("x2", x)
.attr("y1", p)
.attr("y2", h - p - 1);
…
本例很简单,可以使用下面的代码测试效果,你学会了吗?
完整代码:
<!DOCTYPE html><html>
<head>
<metacharset="UTF-8" content="">
<title>linegrid</title>
<styletype="text/css">
//分组中线的样式,这里设置了颜色值,实际使用可以更淡,例如stroke: #ccc
.gridline {
stroke: #000;
}
</style>
<scripttype="text/javascript" src="d3.js"></script><!--下载到本地-->
</head>
</head>
<body>
<script type="text/javascript">
var data = d3.range(10);// (1) 生成一个10元素的数组
var w = 960,
h= 500,
p= 40,//内边距
x= d3.scale.linear().domain([0, 1]).range([p, w - p]), //(2) 定义x和y比例尺
y= d3.scale.linear().domain([0, 1]).range([h - p, p]);
//(3) 绘制SVG
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//(4) 给SVG添加分组,并设置样式类,样式见<style>标签中的设置
var grid = svg.selectAll(".grid")
.data(x.ticks(10))
.enter().append("g")
.attr("class", "grid");
//(5) 添加线条,设置起始坐标(x1,y1)和结束坐标(x2,y2)的值即可
//竖线
grid.append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", p)
.attr("y2", h - p - 1);
//横线
grid.append("line")
.attr("y1", y)
.attr("y2", y)
.attr("x1", p)
.attr("x2", w - p + 1);
</script>
</body>
</html>
相关文章推荐
- 【D3.JS数据可视化实战记录】绘制力学图
- 【D3.JS数据可视化实战记录】绘制动态状态变化趋势图
- 【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制
- 【D3.JS数据可视化实战记录】绘制条形图
- 【D3.js数据可视化实战】--(2)本地时间轴
- 我的【数据可视化】——d3.js(2)--绘制简易clock
- 【D3.js数据可视化实战】--(2)本地时间轴
- jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战
- 用D3.js进行医疗数据可视化 (三)坐标轴 (Axes)
- python实战二:使用CSV数据绘制带数据标志的折线图(matplotlib)
- 利用Python绘制MySQL数据图实现数据可视化
- 《大数据可视化实战:d3.js深度应用》-02 开发环境配置
- 用D3.js进行医疗数据可视化 (四) 堆积区图 (Stacked Area Chart)
- d3.js(Data-Driven Documents)数据可视化-----初步学习
- 数据可视化与D3.js
- 机器学习实战之k-近邻算法(3)---如何可视化数据
- 数据可视化----Flotr2和Raphaël 绘制气泡图
- 用D3.js进行医疗数据可视化 (二)图例 (Legend)
- 数据可视化上集:使用Gliffy,ProcessOn迅速绘制论文中的流程图,系统结构图
- 实战Delphi数据网格色彩特效