散点图的更新
一、创建x轴 y轴
二、更新x轴 y轴
三、在过渡开始和结束时执行的操作
格式：
- . on(“start”,function(){ … })
- . on(“end”,function(){ … })
要点：
1、. on(“start”,function(){ … })中一定不能添加 transition ，否则会覆盖掉外面的transition效果
2、. on(“end”,function(){ … })中可以使用transition 效果
四、剪切路径（蒙版）
超出蒙版外的像素不会显示
使用剪切路径的步骤：
- 定义 clipPath 并给其添加 id
- 在此 clipPath 中放一个可见元素（如：rect）
- 在需要使用蒙版的元素上添加一个对 clipPath 的引用
源代码：
<!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;
}
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<p>Updata datas</p>
<script>
var dataset=[[10,20],[480,90],[270,50],[100,33],
[330,95],[410,12],[600,150],[23,156],
[85,21],[220,80],[50,70],[130,78],
[429,71],[512,520],[334,216],[76,297],
[381,98],[23,76],[365,23],[167,327],
[247,456],[303,315],[234,497],[576,398],
[250,275],[80,198],[236,301],[578,1],
[2,197],[178,378],[271,478],[165,150],
[487,202],[414,408],[408,317],[576,365]]
var w=700;
var h=500;
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]);
//定义x轴数轴
var xAxis=d3.axisBottom()
.scale(xScale)
//.ticks(5); //粗略设置刻度线的数量，只是粗略，d3会更精确的确定具体采用几根刻度线
//定义y轴数轴
var yAxis=d3.axisLeft()
.scale(yScale)
//.ticks(4);
//添加蒙版
svg.append("clipPath") //创建新的clipPath元素
.attr("id","chart-area")
.append("rect") //在clipPath中添加可见元素
.attr("x",padding)
.attr("y",padding)
.attr("width",w-padding*3)
.attr("height",h-padding*2)
svg.append("g")
.attr("id","circles")
.attr("clip-path","url(#chart-area)") //添加对 clipPath 的引用
.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");
//g是分组元素：1）为组织其他元素；2）对整个分组应用变换，从而影响该组中所有元素
//添加x轴数轴，必须调用xAxis函数
svg.append("g")
.attr("class","x axis")
//将数轴分组移动到图标下方
.attr("transform","translate(0,"+(h-padding)+")")
.call(xAxis);
//添加y轴数轴
svg.append("g")
.attr("class","y axis")
.attr("transform","translate("+padding+",0)")
.call(yAxis);
d3.select("p")
.on("click",function(){
var dataset=[[109,20],[100,50],[270,90],[378,33],
[410,12],[330,150],[23,150],[600,156],
[85,21],[512,23],[50,70],[130,78],
[429,197],[512,520],[334,216],[76,297],
[381,98],[23,76],[220,23],[167,612],
[247,456],[303,315],[234,497],[576,398],
[250,275],[80,567],[236,301],[578,1],
[2,33],[178,378],[271,478],[165,150],
[487,202],[414,408],[408,317],[700,365]]
//更新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([h-padding,padding])
//更新r的比例尺
var rScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function(d){ return d[1]; })])
.range([2,5]);
//定义x轴数轴 一定要重新定义一次在更新，否则数轴更新无效
var xAxis=d3.axisBottom()
.scale(xScale)
//定义y轴数轴
var yAxis=d3.axisLeft()
.scale(yScale)
//更新x轴数轴
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis)
//更新y轴数轴
svg.select(".y.axis") //必须写清楚是哪个轴，不然会出错
.transition()
.duration(1000)
.call(yAxis)
//更新圆形
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.on("start",function(){
d3.select(this)
.attr("fill","magenta") //在start中不可以用transition，会覆盖掉外面的过渡效果
.attr("r",6)
})
.attr("cx",function(d){ //d代表返回的整个数据集
return xScale(d[0]);
})
.attr("cy",function(d){
return yScale(d[1]);
})
.on("end",function(){
d3.select(this)
.transition()
.duration(250) //在end中可以用transition
.attr("fill","black")
.attr("r",function(d){ return rScale(d[1]) ;})
})
//更新文本
svg.selectAll("text")
.data(dataset)
.transition()
.duration(500)
.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/150450.html
