数据可视化之散点图

Word count: 492 / Reading time: 2 min

 2014/11/15   Share

D3.js是当下最火的可视化库之一，这篇博客记录了如何实现一个最基本的散点图，并用三角形表示数据点。

代码如下：


\<!DOCTYPE html\>
\<html\>
\<head lang="en"\>
\<meta charset="UTF-8"\>
\<title\>\</title\>
\<script type="text/javascript" src="script/d3.v3.js"\> \</script\>
\</head\>
\<style\>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.point {
fill: steelblue;
stroke: #000;
}
\</style\>
\<body\>
\<script\>
var margin = {top:20,right:20,bottom:30,left:40},
width = 960-margin.left-margin.right,
height = 500-margin.top-margin.bottom;
var x = d3.scale.linear().range([0,width]());
var y = d3.scale.linear().range([height,0]());
var svg = d3.select('body').append('svg').attr('width',width+margin.left+margin.right)
.attr('height',height+margin.top+margin.bottom)
.append('g')
.attr('transform',"translate("+margin.left+","+margin.top+')');
d3.csv('tmp.csv',function(error,data){
if(error) throw error;
data.forEach(function(d){
d.x=+d.x;
d.y=+d.y;
})
//        console.log(data);
x.domain(d3.extent(data,function(d){return d.x})).nice();
y.domain(d3.extent(data,function(d){return d.y})).nice();
svg.append('g')
.attr('class','x axis')
.attr('transform','translate(0,'+height+")")
.call(d3.svg.axis().scale(x).orient('bottom'));
svg.append('g')
.attr('class','y axis')
.call(d3.svg.axis().scale(y).orient('left'));
svg.selectAll('.point')
.data(data).enter()
.append('path')
.attr('class','point')
.attr('d',d3.svg.symbol().type('triangle-up'))
.attr('transform',function(d){return "translate("+x(d.x)+","+y(d.y)+")"});
})
\</script\>
\</body\>
\</html\>

代码本身是很基本的，不过代码里面有一些可以学习的好习惯，比如：

使用var margin = {top:20,right:20,bottom:30,left:40}变量来表示距离上下左右的距离，这样统一管理，只有一个变量。
data.forEach(function(d){
d.x=+d.x;
d.y=+d.y;
})
使用这种方式直接转换成数值型的变量，免去了使用其他函数的麻烦。
.nice()函数的使用，可以适当扩大extent的范围，这样最大最小值在坐标轴上看起来不会在极端的位置上。
.attr(‘d’,d3.svg.symbol().type(‘triangle-up’)) 使用不局限于circle的图形来表示一个点
svg.append(‘g’).attr(‘class’,’y axis’).call(d3.svg.axis().scale(y).orient(‘left’));
一句话里指定要绘制坐标轴需要的所有东西。

原文作者: Chih-Hao

原文链接: http://zhihaozhang.github.io/2014/11/15/数据可视化之散点图/

发表日期: November 15th 2014, 1:54:57 pm

Next Post

associate brush
Previous Post

浅谈d3.js中强制异步文件读取同步的四种方法

CATALOG

