【D3.js数据可视化系列教程】--(十一)散点图
2013-09-08 12:36
791 查看
1. 一般的散点绘制
散点图的绘制思路:准备输入数据,用二维数组表示每个点的坐标绘制SVG,并绑定数据
绘制圆元素,并用绑定的数据设置圆的属性
以下就是这个思路的实现,下面我们会介绍下调整的办法。
//高宽 var w = 500; var h = 100; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; //创建SVG var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .attr("r", 5);
2. 点的大小
控制半径,我们可以根据Y坐标的数据来绘制上面大下面小的圆。.attr("r", function(d) { return Math.sqrt(h - d[1]); });
3. 点的文本
注意文本的位置与圆中心的位置svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d[0] + "," + d[1]; }) .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");
4. 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-9-drawScatterPlot.html</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//高宽
var w = 500;
var h = 100;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
//创建SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", function(d) { return Math.sqrt(h - d[1]); });
svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d[0] + "," + d[1]; }) .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");</script>
</body>
</html>
5. 效果
相关文章推荐
- 【D3.V3.js数据可视化系列教程】--(十一)散点图
- 【D3.js数据可视化系列教程】--(五)用层画条形图
- 【D3.js数据可视化系列教程】--(九)D3的数据类型
- 【D3.js数据可视化系列教程】--(十五)SVG基本图形绘制
- 【D3.js数据可视化系列教程】(二十五)--加载csv文件
- 【D3.js数据可视化系列教程】(三十三)-- 力导向图之图片和提示
- 【D3.js数据可视化系列教程】--(六)生成测试数据
- 【D3.js数据可视化系列教程】(二十九)--折叠树
- 【D3.js数据可视化系列教程】(二十七)--径向树
- 【D3.js数据可视化系列教程】(二十八)--弦图
- 【D3.js数据可视化系列教程】--(十)更自由的条形图
- 【D3.js数据可视化系列教程】(三十五)-- 矩形树
- 【D3.js数据可视化系列教程】(十七)--通过键联结数据
- 【D3.js数据可视化系列教程】(二十)--交互图表之条形图排序
- 【D3.js数据可视化系列教程】--(十四)有路径的文字
- 【D3.js数据可视化系列教程】(二十一)--交互图表之条形图排序切换
- 【D3.js数据可视化系列教程】(二十六)--加载SVG文件
- 【D3.js数据可视化系列教程】(十八)--组合添加删除
- 【D3.js数据可视化系列教程】(二十二)--交互图表之提示条
- 【D3.js数据可视化系列教程】--(一)简介