- 下定决心，好好过一天~
这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可
源代码
<template>
<div id="ScatterChartsTransitionD3" width=600 height=600>
<button type="button" class="Button" onclick="update()">更新</button>
<button type="button" class="Button" onclick="add()">添加</button>
<button type="button" class="Button" onclick="sub()">删除</button>
</div>
</template>
<script>
import * as d3 from "d3"
export default {
name:"ScatterChartsTransitionD3",
created(){
},
mounted(){
this.ScatterChartsTransitionD3();
},
methods:{
ScatterChartsTransitionD3(){
var dataAll = [[1,2],[2,3],[5,6],[8,8],[1,3],[5,6],[4,4],[7,1]];
var padding = {
top:30,left:30,bottom:30,right:30};
var svgWidth = 600;
var svgHeight = 600;
var circleRadius = 5;
var svg = d3.select("#ScatterChartsTransitionD3")
.append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
var xScale = d3.scaleLinear()
.domain([0,1.2*d3.max(dataAll,function(d){
return d[0];
})])
.range([0,svgWidth]);
var yScale = d3.scaleLinear()
.domain([0,1.2*d3.max(dataAll,function(d){
return d[1];
})])
.range([0,svgHeight]);
function drawUpdateCharts(){
var updateCharts = svg.selectAll("circle")
.data(dataAll)
var enterCharts = updateCharts.enter();
var exitCharts = updateCharts.exit();
updateCharts.transition()
.delay(500)
.duration(2000)
.attr("cx",function(d,i){
return xScale(d[0]);
})
.attr("cy",function(d,i){
return svgHeight - padding.bottom - yScale(d[1]);
})
.attr("r",circleRadius)
enterCharts.append("circle")
.attr("fill","white")
.attr("cx",function(d,i){
return xScale(0);
})
.attr("cy",function(d,i){
return svgHeight - padding.bottom - yScale(0);
})
.attr("r",0)
.transition()
.delay(500)
.duration(2000)
.attr("fill","black")
.attr("cx",function(d,i){
return xScale(d[0]);
})
.attr("cy",function(d,i){
return svgHeight - padding.bottom - yScale(d[1]);
})
.attr("r",5)
exitCharts.transition()
.delay(500)
.duration(2000)
.attr("fill","white")
.remove();
}
function drawUpdateChartsText(){
var updateChartsText = svg.selectAll("text")
.data(dataAll);
var enterChartsText = updateChartsText.enter();
var exitChartsText = updateChartsText.exit();
updateChartsText.transition()
.delay(500)
.duration(2000)
.attr("x",function(d,i){
return xScale(d[0]);
})
.attr("y",function(d,i){
return svgHeight - padding.bottom - yScale(d[1]);
})
.attr("dx",circleRadius*5)
.attr("dx",14*2)
.text(function(d){
return "(" + d[0] + "," + d[1] + ")";
});
var entertransition = enterChartsText.append("text")
.attr("fill","white")
.attr("font-size","0px")
.attr("text-anchor","middle")
.attr("x",function(d,i){
return xScale(0);
})
.attr("y",function(d,i){
return svgHeight - padding.bottom - yScale(0);
})
.attr("dx",circleRadius*5)
.attr("dx",14*2)
.text(function(d){
return "(" + d[0] + "," + d[1] + ")";
})
entertransition.transition()
.delay(500)
.duration(2000)
.attr("fill","green")
.attr("font-size","14px")
.attr("x",function(d,i){
return xScale(d[0]);
})
.attr("y",function(d,i){
return svgHeight - padding.bottom - yScale(d[1]);
})
.attr("dx",circleRadius*5)
.attr("dx",14*2)
.text(function(d){
return "(" + d[0] + "," + d[1] + ")";
})
exitChartsText.transition()
.delay(500)
.duration(2000)
.attr("fill","white")
.remove();
}
function drawAxis(){
var xAxis = d3.axisBottom()
.scale(xScale);
yScale.range([svgHeight,0]);
var yAxis = d3.axisLeft()
.scale(yScale);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (svgHeight - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + -1*padding.bottom + ")")
.call(yAxis);
}
drawUpdateCharts();
drawUpdateChartsText();
drawAxis();
}
}
}
</script>
<style>
</style>