本文详述了SVG和D3.js实现的各种数据可视化，包括直方图、分形二叉树、环图、饼图、力导向图、词云图以及地图可视化。涵盖了SVG的基本语法、D3的选择器方法、递归实现分形二叉树、饼图和环图的交互设计、力导向图的绘制技巧以及词云图和地图的可视化方法。
目录
一、直方图
1.SVG直方图
1.1基本语法
- 获取屏幕分辨率和浏览器可用宽度
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
- 绘制矩形
//SVG添加图形
var myRect=document.createElement("rect");
hist.appendChild(myRect);
myRect.outerHTML="<rect x=20 y=50 width=100 height=300 style='fill:blue'/>";
- 添加文本
//SVG添加文本
var svgText=document.createElement("text");
hist.appendChild(svgText);
svgText.outerHTML="<text x=0 y=20 style='font-family:微软雅黑;fill:rgb(0,0,255);font-size:20'> "+w+" </text>";
- 随机颜色
var hiscolor=Math.round(Math.random()*255);
myRect[i].outerHTML="<rect x="+(i*120)+" y="+(300-rand)+" width=100 height="+rand+" style='fill:rgb(0,0,"+(hiscolor)+")'/>";
1.2实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8"><!--字符集是utf-8-->
<title>安卓移动设备市场份额品牌排名</title>
</head>
<body>
<h2>2021年2月份 安卓移动设备市场份额品牌排名</h2>
<svg id="main" width=800 height=600>
<defs id="effectList">
</defs>
</svg>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w = w * 0.98;
h = h * 0.9;
main.setAttribute("width", w);
main.setAttribute("height", h);
var data = [{ name: "华为", times: 36.3 },
{ name: "OPPO", times: 17.34 },
{ name: "vivo", times: 16.29 },
{ name: "荣耀", times: 12.99 },
{ name: "小米", times: 7.75 },
{ name: "三星", times: 1.64 },
{ name: "百度", times: 1.5 },
{ name: "创维", times: 1.37 }]
for (var i = 0; i < data.length; i++) {
var d = data[i]; //遍历每个数据对象
var cw = w / data.length - 12; //柱子的宽
var ch = d.times * 10; //柱子的高
var x = i * (w / data.length);
var y = 600 - 50 - ch;
//动态添加渐变对象
var c = rc(); //渐变颜色
//样式列表
effectList.innerHTML += `
<linearGradient id="g${i}" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="${c}"></stop>
<stop offset="100%" stop-color="${c}" stop-opacity="0"></stop>
</linearGradient>`;
//动态创建矩形
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');//创建标签rect
rect.setAttribute('width', cw);
rect.setAttribute('height', ch);
rect.setAttribute('x', x);
rect.setAttribute('y', y);
rect.setAttribute('fill', `url(#g${i})`);
main.appendChild(rect);
//动态添加数据名称
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');//创建标签text
text.setAttribute('x', i * (w / data.length));
text.setAttribute('y', 570);
text.innerHTML = data[i].name;
main.appendChild(text);
//动态添加数据数值
var val = document.createElementNS('http://www.w3.org/2000/svg', 'text');
val.setAttribute('x', x + 11);
val.setAttribute('y', y - 5);
val.innerHTML = data[i].times;
main.appendChild(val);
}
// 随机颜色
function rc() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return `rgb(${r},${g},${b})`
}
</script>
</body>
</html>
1.3效果图
2.D3直方图
2.1基本语法
- D3选择器方法
| 方法名 | 含义 | 示例 |
| selection.select | 返回第一个元素 | d3.select("body") |
| selection.selectAll | 返回所有元素 | d3.selectAll(".content") |
| selection.node | 返回选择中的第一个节点 | selection.node() |
| selection.empty | 测空 | selection.empty() |
| selection.size | 返回选择中的元素个数 | selection.size() |
| selection.attr | 取得或设置属性的值 | selection.attr(name[,value]) |
| selection.property | 取得或设置行内属性 | selection.property(name[,value]) |
| selection.style | 取得或设置样式属性 | selection.style(name[,value[,priority]]) |
| selection.text | 取得或设置文本内容 | selection.text([value]) |
| selection.html | 取得或设置innerHTML内容 | selection.html([value]) |
| selection.classed | 添加或移除CSS类 | selection.classed(name[,value]) |
| selection.append | 创建并追加一个新元素 | selection.append(name) |
| selection.insert | 在已存在元素前创建并插入一个元素 | selection.insert(name[,before]) |
| selection.remove | 从当前文档中移除当前元素 | selection.remove() |
| selection.data | 为一组元素分别取得或设置数据 | selection.data([value[,key]) |
| selection.datum | 绑定相同的元素 | selection.datum([value]) |
| selection.enter | 为缺失的元素返回占位符 | selection.enter() |
| selection.exit | 返回不再需要的元素 | selection.exit() |
- 准备D3库(下载地址：http://d3js.org)
<!--本地引用-->
<script src=“d3.v3.min.js” charset=“utf-8”>
</script>
<!--网络引用-->
<script src=“http://d3js.org/d3.v3.min.js” charset=“utf-8”>
</script>
- 创建svg元素，为svg元素设置属性
var width = document.body.clientWidth; //SVG绘制区域的宽度
var height = document.body.clientHeight; //SVG绘制区域的高度
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>
.attr("width", width) //设定<svg>的宽度属性
.attr(“height”, height); //设定<svg>的高度属性
- 在页面添加一个向上生长的矩形框
var dataset=[189,300,60,200,120,150];
var rect=svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill","green")
.attr("x",function(d,i){return i*250})
.attr("y",function(d,i){return 800-d})
.attr("width",240)
.attr("height",function(d,i){return d})
- 矩形添加文本数值
var text=svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("fill","red")
.attr("x",function(d,i){return i*250})
.attr("y",function(d,i){return 800-d})
.attr("dx",120)
.attr("dy","1em")
.text(function(d){return d;})
2.2实例代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8"><!--字符集是utf-8-->
</head>
<body>
<script src="d3.v3.min.js"></script>
<script>
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
w = w * 0.98;
h = h * 0.90;
var tv = new Array("湖南卫视", "江苏卫视", "浙江卫视", "东方卫视", "北京卫视",
"深圳卫视", "广东卫视", "安徽卫视", "天津卫视", "山东卫视", "黑龙江卫视",
"重庆卫视", "辽宁卫视", "湖北卫视", "江西卫视", "内蒙古卫视", "吉林卫视",
"四川卫视", "贵州卫视", "东南卫视", "云南卫视", "山西卫视");
var view = new Array(0.444, 0.382, 0.266, 0.255, 0.178,
0.137, 0.134, 0.109, 0.065, 0.057, 0.043,
0.040, 0.036, 0.035, 0.035, 0.028, 0.024,
0.024, 0.018, 0.017, 0.016, 0.015);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(view)
.enter()
.append("rect")
.attr("y", function (d, i) {//d是绑定的数据，i是数据的下标
return (h / view.length) * i+10;
})
.attr("x", 100)
.attr("height", function (d, i) {
return (h / view.length) - 10;
})
.attr("width", function (d) {
return Math.round(d * 2500);
})
.attr("fill", function (d, i) {
return "rgb(" + 10 * i + "," + 20 * i + ",200 )";
});
svg.selectAll("text1")
.data(view)
.enter()
.append("text")
.attr("x", function (d) {
return Math.round(d * 2500) + 110;
})
.attr("y", function (d, i) {
return (h / tv.length) * i + 24;
})
.text(function (d) {
return d;
})
.style("font-size", "80%")
.attr("fill", function (d, i) {
return "rgb(0,0,0)";
});
svg.selectAll("text2")
.data(tv)
.enter()
.append("text")
.attr("x", 20)
.attr("y", function (d,i) {
return (h / tv.length) * i+24;
})
.text(function (d) {
return d;
})
.style("font-size", "80%")
.attr("fill", function (d, i) {
return "rgb(" + 5 * i + "," + 10 * i + ", 0 )";
});
svg.append("text")
.attr("x", function (d, i) {
return w / 2 + 100 ;
})
.attr("y", 300)
.text("2021年4月1日 各电视台收视率数据")
.attr("fill", "rgb(100,100,100)")
.style("font-size", "200%");
svg.append("text")
.attr("x", function (d, i) {
return w / 2 + 100;
})
.attr("y", 375)
.text("数据来源：http://www.tvtv.hk/archives/category/tv")
.attr("fill", "blue")
.style("font-size", "100%")
.style("fill", "blue");
</script>
</body>
</html>2.3效果图
二、分形和二叉树
1.分形二叉树——递归示意
1.1递归实现
- 递归函数： show(X坐标，Y坐标，长度，衰减系数，角度，迭代次数，绘图区)
- Java实现： show(double x0,double y0,double length,double rate,double angle,int count,Graphics2D g2)
1.2主要代码
//初值
show(myWidth/2,(int)(myHeight*3/4),200,0.5,-Math.PI/2,14,g2);
//绘直线
//起点
x1=x0;
y1=y0;
//终点
x2=(int)(x1+length*Math.cos(angle));
y2=(int)(y1+lenght*Math.sin(angle));
lineL=new Line2D.Double(x1,y1,x2,y2);
g2.draw(lineL);
//左子树
show(x2,y2,length*rate,0.6,angle-Math.PI/4,count-1,g2);
//右子树
show(x2,y2,length*rate,0.6,angle+Math.PI/4,count-1,g2);
2.分形二叉树——正态分布
2.1java.util.Random类
- 方法public double nextGaussian()：返回下一个伪随机数，服从高斯分布，均值 0，标准差 1
- 正态分布密度函数
- u：均值 q：方差
java.util.Random r1 = new java.util.Random();
x =(int)(u+q*r1.nextGaussian());
y =(int)(1/(q*Math.sqrt(2*Math.PI))*Math.exp(-(x-u)*(x-u)/(2*q*q))*y0*100);
2.2主要代码：u：均值 q：方差
double ru=0.6,rp=0.2; //比例均值，方差
double au=0.8,ap=0.2; //角度均值，方差
rate=ru+rp*rt.nextGaussian(); //正态分布比例
double angleAddL=au+ap*rt.nextGaussian();
angle=angle-Math.PI/4*angleAddL; //左边角度
3.分形二叉树——云模型
3.1参数
期望：Ex------均值
熵：En---------方差
超熵：He------方差的变化
- u：均值 q：方差 h：超熵
随机数：x =(int)(u+q*r1.nextGaussian());
变化的方差：e=q+h*r2.nextGaussian();
密度： yc=(int)(1/(e*Math.sqrt(2*Math.PI))*Math.exp(-(x-u)*(x-u)/(2*e*e))*y0*100);
3.2主要代码
double ru=0.6,rp=0.2,rh=0.05; //比例均值，方差，超熵
double au=0.8,ap=0.2,ah=0.1; //角度均值，方差，超熵
rate=ru+(rp+rh*rt.nextGaussian())*rt.nextGaussian();//云模型比例
double angleAddL=au+(ap+ah*rt.nextGaussian())*rt.nextGaussian();
angle=angle-Math.PI/4*angleAddL; //左边角度
4.仿真树
4.1基本语法
- 设置线宽
Stroke stroke = new BasicStroke(count, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL);
g2.setStroke(stroke);
- 画线
lineL=new Line2D.Double(x1,y1,x2,y2);
g2.draw(lineL);
4.2示例代码
<!DOCTYPE html>
<html>
<head>
<title>仿真树</title>
</head>
<body>
<svg id="svgTree" width=800 height=600></svg>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w = w * 0.9;
h = h * 0.9;
var svgTree = document.getElementById("svgTree");
svgTree.setAttribute("width", w);
svgTree.setAttribute("height", h);
var drawTree = function (ctx, startX, startY, length, depth, angle, branchWidth, angleFixed, color) {
var defaultAngle = Math.PI / 2;
var defaultPercent = 0.1;
var direction = angle < 0 ? -1 : 1;
var defaultTime = 50;
var rand = Math.random;
var defaultBranchesNumber = angleFixed ? 2 : 4 * Math.random() + 1;
var timing = angleFixed ? 10 : 20;
var endX &#
最低0.47元/天 解锁文章
扫一扫
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
