安装环境：
1.tomcat安装和配置教程：https://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html
2.任意编译器（甚至可以使用TXT文件），本博客推荐使用pycharm以及Visual Studio;
3.安装完成tomcat之后，在/webapps目录文件下创建一个新文件夹，本文创建的是vis2021文件夹
4.在之后的调试过程中，即通过使用浏览器输入127.0.0.1:8080/vis2021/文件名.html来进行实时的预览，另外可以通过右键浏览器检查代码。（通过课程学习，也明白了每完成一部分内容一定要进行一个实时的预览，检查对应模块是否报错）
5.推荐课程：http://cuc.yingshinet.com/ch11/（适合初学者入门）
js直方图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
var w=window.innerWidth||document.documentElement.clientWidth ||document.body.clientWidth;
var h=window.innerHeight;
x=document.getElementById("demo")
</script>
<svg id="histSvg" width="1520" height="721" >
</svg>
<script>
var hist=document.getElementById("histSvg");
hist.setAttribute("width",w*0.9);
hist.setAttribute("height",h*0.9);
var length=200;
var gdp=new Array(15056,27148,11708,32142,32985,19363,13123,11180,14733,11417,35730,9459,12204,24645,6742,18463,12843,23663,16143,14011,17211,9527,25558,16164,65473,57431,7972,13361,12695,12809,11567);
var gdpName=new Array("河南省","山东省","四川省","广东省","江苏省","河北省","湖南省","安徽省","湖北省","广西省","浙江省","云南省","江西省","辽宁省","贵州省","黑龙江","陕西省","福建省","山西省","重庆市","吉林省","甘肃省","内蒙古","新疆区","上海市","北京市","天津市","海南省","宁夏区","青海省","西藏区");
var myRect=new Array(31);
var txt=new Array(31);
var pname=new Array(31);
var histWidth=Math.round(w/myRect.length)
for(var i=0;i<31;i++){
var rand=Math.round(gdp[i]/120);
var hiscolorA=Math.round(Math.random()*255);
var hiscolorB=Math.round(Math.random()*255);
var hiscolorC=Math.round(Math.random()*255);
console.log(i);
myRect[i]=document.createElement("rect");
txt[i]=document.createElement("text");
pname[i]=document.createElement("text");
hist.appendChild(myRect[i]);
myRect[i].outerHTML="<rect x="+(i*histWidth)+" y="+(600-rand-20)+" width="+(histWidth)+" height="+rand+" style='fill:rgb("+(hiscolorA)+","+(hiscolorB)+","+(hiscolorC)+")'>"
hist.appendChild(txt[i]);
txt[i].outerHTML="<text x="+(i*histWidth)+" y="+(600-rand-20)+" fill='block'>"+gdp[i]+"</text>>";
hist.appendChild(pname[i]);
pname[i].outerHTML="<text x="+(i*histWidth)+" y="+600+" fill='block'>"+gdpName[i]+"</text>>";
}
</script>
</body>
</html>二叉树
<html>
<head>
<meta charset="utf-8">
<text style="font-family:Georgia;font-size:35;font-weight:bold">
D3.js works<br>
</text>
<text style="font-family:华文中宋;font-size:20;font-weight:bold">
yourname
</text>
</head>
<body >
<svg id="mySvg" 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;
var mysvg = document.getElementById("mySvg");
mysvg.setAttribute("width",w*0.9);
mysvg.setAttribute("height",h*0.9);
var length=250;
rate=0.6;
var x0=w/2;
var y0=h;
var count=10;
function show(x0,y0,length,rate,a,count){
var x1=x0;
var y1=y0;
length=length*(0.8+0.5*Math.random());
var colorR=Math.floor(Math.random()*255);
var colorG=Math.floor(Math.random()*255);
var colorB=Math.floor(Math.random()*255);
var x2=x1+length*Math.cos(a);
var y2=y1+length*Math.sin(a);
svgline= document.createElement("line");
mysvg.appendChild(svgline);
svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgb("+colorR+","+colorG+","+colorG+"); stroke-width:"+count+";' />";
var aL=a-Math.PI/4*(0.5+0.7*Math.random());
var aR=a+Math.PI/4*(0.5+0.7*Math.random());
if(count>0){
show(x2,y2,length*rate,rate,aL,count-1);
show(x2,y2,length*rate,rate,aR,count-1);
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
show(x0,y0,length,rate,-Math.PI/2,count);
</script>
</body>
</html>文字树
<html>
<head>
<meta charset="utf-8">
</head>
<body >
<svg id="mySvg" 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;
var mysvg = document.getElementById("mySvg");
mysvg.setAttribute("width",w);
mysvg.setAttribute("height",h);
var length=250;
rate=0.6;
var x0=w/2;
var y0=h;
var count=9;
var str="柳暗花明又一村"
function show(x0,y0,length,rate,a,count){
var x1=x0;
var y1=y0;
var fontsize=count*1.5;
length=str.length*fontsize;
var x2=x1+length*Math.cos(a);
var y2=y1+length*Math.sin(a);
var colorR=Math.floor(Math.random()*255);
var colorG=Math.floor(Math.random()*255);
var colorB=Math.floor(Math.random()*255);
var word= document.createElement("text");
mysvg.appendChild(word);
word.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' style='font-size:"+fontsize+";fill:rgb("+colorR+","+colorG+","+colorG+");' >主体是大他者的言说</text>";
var aL=a-Math.PI/6*(0.5+0.5*Math.random());
var aR=a+Math.PI/6*(0.5+0.5*Math.random());
if(count>0){
show(x2,y2,length,rate,aL,count-1);
show(x2,y2,length,rate,aR,count-1);
if(count==1){
var apple=document.createElement("circle");
mysvg.appendChild(apple);
apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+4*Math.random()+" fill='rgb("+colorR+","+colorG+","+colorG+")'/>";
}
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
show(x0,y0,length,rate,-Math.PI/2.4,count);
show(x0,y0,length,rate,-Math.PI/1.6,count);
</script>
</body>
</html>D3直方图
<html>
<head >
<meta charset="utf-8">
<text style="font-family:Georgia;font-size:35;font-weight:bold">
D3直方图<br>
</text>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var datasize=new Array(10);
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;
for(var i=0;i<10;i++){
datasize[i]=500*Math.random();
}
var color=d3.schemeCategory10;
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
/*
svg.append("rect")
.attr("x",0)
.attr("y",0)
.attr("width",100)
.attr("height",200);
*/
svg.selectAll("rect")
.data(datasize)
.enter()
.append("rect")
.attr("x",function(d,i){
return i*(w/datasize.length);
})
.attr("y",function(d){
return h-d;
})
.attr("width",(w/datasize.length-10))
.attr("height",function(d){
return d;
})
.attr("fill",function(d,i){
return color[i];
});
var text=svg.selectAll("text")
.data(datasize)
.enter()
.append("text")
.text(function(d,i){
return String(Math.floor(datasize[i]));
})
.attr("x",function(d,i){
return i*(w/datasize.length);
})
.attr("y",function(d){
return h-d;
})
.attr("width",(w/datasize.length-10))
.attr("height",function(d){
return d;
})
.attr("fill",function(d,i){
return color[i];
});
</script>
</body>
</html>交互环图
<html>
<head >
<meta charset="utf-8">
<text style="font-family:Georgia;font-size:35;font-weight:bold">
交互环图<br>
</text>
</head>
<body>
<script src="https://d3js.org/d3.v5.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.9;
var color=d3.schemeCategory10;
// var dataset=[{startAngle:0,endAngle:Math.PI*0.5,outerRadius:147},
// {startAngle:Math.PI*0.5,endAngle:Math.PI*1,outerRadius:247},
// {startAngle:Math.PI*1,endAngle:Math.PI*1.5,outerRadius:186},
// {startAngle:Math.PI*1.5,endAngle:Math.PI*2.0,outerRadius:0}
// ]
var dataset=[["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
var pie=d3.pie()
.value(function(d){return d[1];})
var piedata=pie(dataset);
var arcPath=d3.arc()
.innerRadius(200)
.outerRadius(300);
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
svg.selectAll("path")
.data(piedata)
.enter()
.append("path")
.attr("d",function(d,i){
return arcPath(d);
})
.attr("fill",function(d,i){
return color[i];
})
//.attr("stroke","black")
.attr("transform","translate("+w/2+","+h/2+")")
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill", d3.rgb(color[i]).brighter());
svg.append("text")
.attr("id","info")
.attr("x",w/2)
.attr("y",h/2-25)
.attr("text-anchor","middle")
.attr("font-size",36)
.text(d.data[0]);
svg.append("text")
.attr("id","value")
.attr("x",w/2)
.attr("y",h/2+25)
.attr("text-anchor","middle")
.attr("font-size",36)
.text(d.value+"%");
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",function(d){
return color[i];
});
d3.select("#info")
.remove();
d3.select("#value")
.remove();
})
var text=svg.selectAll("text")
.data(piedata)
.enter()
.append("text")
.attr("transform",function(d,i){
return "translate("+w/2+","+h/2+")"+"translate("+arcPath.centroid(d)+")";
})
.text(function(d,i){
return d.value;
})
.attr("fill","black");
</script>
</body>
</html>力导向图
<html>
<head >
<meta charset="utf-8">
<text style="font-family:Georgia;font-size:35;font-weight:bold">
简易力导向图<br>
</text>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="a.json"></script>
<script>
var width=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var height=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(200)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("a.json", function(error, graph) {
console.log(graph);
force.nodes(graph.nodes)
.links(graph.links)
.start();
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 16)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>
</html>人物关系图
<html>
<head>
<meta charset="utf-8">
<title>
《Breaking Bad》人物关系
</title>
</head>
<body style=" opacity:1">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
var img_h=50;
var img_w=50;
var radius=10;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var nodes=[{name:"沃尔特.怀特",intro:"身患癌症的大学教授，后为家人走上制毒贩毒道路，成为大毒枭。"},
{name:"汉克.施拉德",intro:"美国缉毒局特勤副主管，警务能力出众，他最终侦破海森堡毒品案。"},
{name:"斯凯勒",intro:"沃尔特的妻子，同时是疼爱自己两个孩子的母亲，最后为了孩子的安全帮助沃尔特洗钱。"},
{name:"杰西.平克曼",intro:"大学时期是沃尔特的学生，后成为制毒的伙伴，但本性善良，没有太多头脑。"},
{name:"索尔.古德曼",intro:"油嘴滑舌的律师，后成为沃尔特和杰西的生意伙伴。"},
{name:"古斯塔沃.弗林",intro:"表面是一个连锁炸鸡店的老板，实际拥有一个庞大的贩毒集团，也是沃尔特的最大敌人。"},
{name:"迈克.厄门绍特",intro:"以前是一名警察，后成为职业杀手，为古斯塔沃工作。"},
{name:"玛丽.施拉德",intro:"汉克的妻子，斯凯勒的妹妹，得知沃尔特是毒贩与斯凯勒关系破裂。"}];
var edges=[{source:0,target:1,relation:"姐夫"},{source:0,target:2,relation:"夫妻"},{source:0,target:3,relation:"师生&同伙"},
{source:0,target:4,relation:"生意伙伴"},{source:0,target:5,relation:"敌人"}, {source:0,target:7,relation:"姐夫"},
{source:1,target:7,relation:"夫妻"},{source:1,target:4,relation:"抓捕关系"},{source:1,target:5,relation:"抓捕关系"},
{source:2,target:7,relation:"姐妹"}, {source:3,target:4,relation:"生意往来"},{source:3,target:5,relation:"上下级&敌人"},
{source:3,target:6,relation:"上下级&伙伴"}, {source:5,target:6,relation:"上下级"}];
var force=d3.layout.force()
.nodes(nodes)
.links(edges)
.size([width,height])
.linkDistance(150)
.charge(-600)
.start();
//绘制
var color=d3.scale.category20();
var lines=svg.selectAll(".forceLine")
.data(edges)
.enter()
.append("line")
.attr("class","forceLine")
.style("stroke","gray")
.style("opacity",0.4)
.style("stroke-width",1);
var edges_text = svg.selectAll(".linetext")
.data(edges)
.enter()
.append("text")
.attr("class","linetext")
.text(function(d){
return d.relation;})
.style("stroke","gray")
.style("font-size",8);
var circles=svg.selectAll("forceCircle")
.data(nodes)
.enter()
.append("circle")
.attr("class","forceCircle")
.attr("r",function(d,i){return d.weight*2;})
.style("stroke","DarkGray")
.style("stroke-width","1.0px")
.attr("fill",function(d,i){return color(i);})
.call(force.drag);
var texts=svg.selectAll(".forceText")
.data(nodes)
.enter()
.append("text")
.attr("class","forceText")
.attr("x",function(d){return d.x;})
.attr("y",function(d){return d.y;})
.style("stroke", "#336666")
.style("stroke-family","仿宋")
.style("font-size","10px")
.attr("dx","-1.5em")
.attr("dy","1.5em")
.text(function(d){return d.name;});
force.on("tick",function(){
lines.attr("x1",function(d){return d.source.x;});
lines.attr("y1",function(d){return d.source.y;});
lines.attr("x2",function(d){return d.target.x;});
lines.attr("y2",function(d){return d.target.y;});
circles.attr("cx",function(d){return d.x;});
circles.attr("cy",function(d){return d.y;});
texts.attr("x",function(d){return d.x;});
texts.attr("y",function(d){return d.y;});
edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
});
</script>
</body>
</html>