d3.js之散点图
步骤:
1、创建 svg
2、在 svg 中创建数据点 circle
3、用比例尺设置数据点的参数,(注意:给比例尺的范围要添加边距,不然有些点会溢出,无法完整显示)
4、添加文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>散点图</title>
<script type="text/javascript" src="d3.js"></script>
<style>
.text{
font-family: sans-serif;
font-size: 11px;
fill: red;
}
</style>
</head>
<body>
<script>
var dataset=[[10,20],[480,90],[270,50],[100,33],[330,95],[410,12],[475,44],[25,67],[85,21],[220,80]]
var w=700;
var h=120;
var padding=30; //不引入会有溢出
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
//比例尺可以很好的反应数据的相对位置,而不受极端数据以及画布大小的影响
//x上的比例尺
var xScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d) {return d[0]; })])
.range([padding,w-padding*2]);
//y上的比例尺
var yScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d) {return d[1]; })])
//.range([padding,h-padding]);
//比例尺的反转,小值在上方,大值在下方
.range([h-padding,padding])
.clamp(true); //强制所有输出值都在指定范围内
//r的比例尺
var rScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){ return d[1]; })])
.range([2,5]);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d){ //d代表返回的整个数据集
return xScale(d[0]);
})
.attr("cy",function(d){
return yScale(d[1]);
})
.attr("r",function(d){
return rScale(d[1]);
});
//添加文本
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){ return d[0]+","+d[1]; })
.attr("x",function(d){ return xScale(d[0])-1; })
.attr("y",function(d){ return yScale(d[1])-8; })
.attr("class","text");
</script>
</body>
</html>
结果如图:
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/150453.html