首先需要建立坐标轴，详见
/yushiershi/article/details/80936859
然后就只剩下画点了，需要准备好点数据、比例尺，比例尺与坐标轴相同
点数据没有必然的规定，根据自己需要使用什么就放什么。例如我需要设置点的坐标（x,y），名称，大小，颜色，都可以放进去
var datas = [];
for(var i=0;i<10;i++){
var x = (()*2000)/100-10;
var y = (()*2000)/100;
var name = "点"+(i+1);
var size = ()+1;
var color = "#";
for(i=0;i<3;i++){
var num = (()*256).toString(16);
color += ==1?"0"+num:num;
}
([x,y,name,size,color]);
}
svg生成点图形
首先是获取当前已有点，注意这些点在画布上已经存在，可以修改各种属性，但是不需要重新生成
var circleUpdate=("circle").data(datas);
circleUpdate
//动画设置
.transition()
.duration(500)
//动画设置
.attr("cx",function(d){
return padding+xScale(d[0]);
})
.attr("cy",function(d){
return padding+yScale(d[1]);
})
.attr("fill", function(d){
return d[4];
})
.attr("r",function (d) {
return d[3];
});
("title")
.text(function(d){
return d[2];
});
如果datas的数量变多了，那么需要新增点
var circleEnter=();
("circle")
//动画开始前
.attr("fill","black")
.attr("cx",padding)
.attr("cy",padding)
.attr("r",5)
//动画开始前
//动画设置
.transition()
.duration(500)
//动画设置
.attr("cx",function(d){
return padding+xScale(d[0]);
})
.attr("cy",function(d){
return padding+yScale(d[1]);
})
.attr("fill", function(d){
return d[4];
})
.attr("r",function (d) {
return d[3];
});
("title")
.text(function(d){
return d[2];
})
.attr("fill","black");var circleExit=();
circleExit
//动画设置
.transition()
.duration(500)
//动画设置
.attr("fill","white")
.remove();
fill图形内部颜色，stroke图形边框颜色
cx、cy圆心坐标，用比例尺如何换算坐标在坐标轴中写过
r是半径大小
svg给圆点生成标题，可以直接放到圆点内部使用title
text是title内容，颜色使用fill
完整代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>散点图</title>
<script src="/d3." charset="utf-8"></script>
</head>
<body>
<div > </div>
<button οnclick="updateCircles()">修改圆点</button>
<button οnclick="addCircles()">增加圆点</button>
<button οnclick="minusCircles()">减少圆点</button>
<button οnclick="minusCirclesNew()">减少圆点图像不变</button>
<script>
//创建svg
var width=400;
var height=300;
var padding = 50;
var svg=("body").select("#content")
.append("svg")
.attr("width",width)
.attr("height",height);
//创建比例尺
var xScale= ()
.domain([-10, 10])
.range([0, width - padding*2]);
var yScale= ()
.domain([0, 20])
.range([height - padding*2, 0]);
//创建坐标轴
var xAxis=()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis=()
.scale(yScale)
.orient("right")
.ticks(5);
//绘制坐标轴
("g")
.attr("id","xaxis")
.attr("transform","translate("+padding+","+(height-padding)+")")
.attr("stroke","gray")
.attr("fill","none")
.call(xAxis);
("g")
.attr("id","yaxis")
.attr("transform","translate("+(xScale(0)+padding)+","+padding+")")
.attr("stroke","gray")
.attr("fill","none")
.call(yAxis);
//创建点数据
var datas = getDatas(50);
function getDatas(len,arr){
var maxlen = 0;
if(!arr){
arr = [];
}else{
var name = arr[-1][2];
maxlen = parseInt((-2));
}
for(var i=0;i<len;i++){
var x = (()*2000)/100-10;
var y = (()*2000)/100;
var size = ()+2;
var color = "#";
for(j=0;j<3;j++){
var num = (()*256).toString(16);
color += ==1?"0"+num:num;
}
([x,y,"",size,color]);
}
for(var i=0;i<;i++){
arr[i][2] = "点"+(i+1);
}
return arr;
}
//生成图形
refreshCircles();
//修改散点
function updateCircles(){
datas = getDatas();
refreshCircles();
}
//增加圆点
function addCircles(){
if(>100){
alert("对不起，圆点数量已经超过100个，不能再增加");
return;
}
getDatas(5,datas);
refreshCircles();
}
//减少圆点
function minusCircles(){
if(<10){
alert("对不起，圆点数量已经小于10个，不能再减少");
return;
}
(0,5);
refreshCircles();
}
//减少圆点图像不变
function minusCirclesNew(){
if(<10){
alert("对不起，圆点数量已经小于10个，不能再减少");
return;
}
(-5,5);
refreshCircles();
}
//更新图像
function refreshCircles(){
var circleUpdate=("circle").data(datas);
var circleEnter=();
var circleExit=();
//数量不变
()
.duration(500)
.attr("cx",function(d){
return padding+xScale(d[0]);
})
.attr("cy",function(d){
return padding+yScale(d[1]);
})
.attr("fill", function(d){
return d[4];
})
.attr("r",function (d) {
return d[3];
});
("title")
.text(function(d){
return d[2];
});
//数量增加
("circle")
.attr("fill","black")
.attr("cx",padding)
.attr("cy",padding)
.attr("r",7)
.transition()
.duration(500)
.attr("cx",function(d){
return padding+xScale(d[0]);
})
.attr("cy",function(d){
return padding+yScale(d[1]);
})
.attr("fill", function(d){
return d[4];
})
.attr("r",function (d) {
return d[3];
});
("title")
.text(function(d){
return d[2];
})
.attr("fill","black");
//数量减少
()
.duration(500)
.attr("fill","white")
.remove();
}
</script>
</body>
</html>