数据可视化

本博客记录这学期关于数据可视化的一些学习，由于我是一个菜鸟，编程能力很弱，希望看到的大佬不要笑话。

文章目录

数据可视化
前言
一、D3相关操作
- 1.D3绘制直方图与饼图
- - （1）基础知识
- 2.D3与数据库连接操作
- - （1）JSP链接数据库并可视化
  - （2）代码:统计单词结果
  - （3）运行结果
- 3.D3与力导向图
- - （2）代码：绘制红楼梦中人物关系图
  - （3）运行结果
总结

前言

一、D3相关操作

1.D3绘制直方图与饼图

（1）基础知识

【1】什么是d3

1、D3.js是一个基于数据的文档操控JavaScript库。
使用HTML，SVG和CSS，D3能够帮你让数据活起来。D3所强调的Web标准帮助开发者在无需
捆绑任何专有框架的前提下，结合强大的可视化组件及其数据驱动的DOM操纵方法，充分利用现代浏览器的全部功能。
2、D3允许开发者将任意数据绑定在文档对象模型（DOM）之上，然后再应用数据驱动转换到文档中。例如，你可以使用D3从一个数组生成一个HTML表格。或者使用同样的数据来创建一个带有平滑过渡和互动功能的交互式SVG柱状图。

【2】需要提前下载的插件

1、直接复制代码下载最新:<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
2、直接点击此处下载：d3.v3.zip

（2）代码：全球幸福指数最低的10个国家

<html><head><meta charset="utf-8"><title>饼状图</title></head><body><meta charset="utf-8"><title>d3饼图</title><script src="d3.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.96;var width = 1;var height = 1;var dataset=new Array(10);dataset=["2.567","2.817","3.300","3.312","3.476","3.476","3.479","3.527","3.538","3.573"];var filename=new Array(10);filename=["阿富汗","南苏丹","津巴布韦","卢旺达","中非","坦桑尼亚","博茨瓦纳","也门","马拉维","印度"];var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);var pie = d3.layout.pie().sort(null);  //定义饼图的布局var piedata = pie(dataset);               //将数据传给pie,就可以得到绘图的数据var outerRadius = 150; //外半径var innerRadius = 30; //内半径，为0则中间没有空白var sum=0;piedata.forEach(function(d,i){d._endAngle=d.endAngle;//保存这个值，后面动画要用到。d.endAngle=d.startAngle;//让每个弧的弧度都是0d.duration=2001*(d.data/d3.sum(dataset));d.delaytime=sum;sum+=d.duration;})var arc = d3.svg.arc() //弧生成器.innerRadius(innerRadius) //设置内半径.outerRadius(outerRadius); //设置外半径var color = d3.scale.category10();var arcs = svg.selectAll("g")     //先添加分组元素，用来存放一段弧的相关元素.data(piedata).sort(d3.ascending).enter().append("g").attr("transform", function(d,i){return "translate(" + (width*360) + "," + (height*150*2.8) + ")";});arcs.append("path")      //给每个分组元素g添加一个路径.attr("fill", function(d, i) {return color(i);}).attr("d", function(d, i) {return arc(d);       }).transition()                  //过渡动画效果.duration(function(d,i){       //格式化时间，时间周期return d.duration;}).ease("linear").delay(function(d,i){console.log(d.delaytime)return d.delaytime;}).attr("d", function(d, i) {d.endAngle=d._endAngle;console.log(d);return arc(d);              //通过之前定义的弧生成器来转化数据}); arcs.append("text").attr("transform", function(d) {//arc.centroid计算出每个弧的中心位置return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text(function(d) {return d.data;})       svg.append("text").attr("font-size","24px").attr("text-anchor","middle").text("2021年幸福指数最低的十个国家占比情况（截止到3月份）").attr("x",350).attr("y",50).attr("fill","black");svg.append("text").attr("font-size","16px").attr("text-anchor","middle").text("数据来源：").attr("x",400).attr("y",200).attr("fill","black");                svg.append("text").attr("font-size","14px").attr("text-anchor","middle").text("https://worldhappiness.report/").attr("x",550).attr("y",200).attr("fill","blue");var w=680;var h=330;var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);   //定义画布//绘制x轴比例尺var xScale=d3.scale.ordinal().domain(d3.range(dataset.length)).range([0,300]);//绘制y轴比例尺var yScale=d3.scale.linear().domain([0,d3.max(dataset)]).range([0,300]);svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",function(d,i) {return i*(w/dataset.length); }).attr("y",function(d){return h-200*(d-2.4)-10;}).attr("width",function(d,i) {return (w/dataset.length)-10; }).attr("height",function(d)    {return 300*(d-2.4);}).attr("fill",color);svg.selectAll("text.value").data(dataset).enter().append("text").attr("x",function(d,i) {return i*(w/dataset.length); }).attr("y",function(d){return h-200*(d-2.4)-50;}).attr("dx",function(d,i) {return (w/dataset.length)-55; }).attr("dy","15px").attr("fill",color).text(function(d)  {return d;});svg.selectAll("text.title").data(filename).enter().append("text").attr("x",function(d,i) {return i*(w/dataset.length); }).attr("y",function(d){return h-20;}).attr("dx",function(d,i) {return (w/dataset.length)-65; }).attr("dy","15px").attr("fill","black").text(function(d)  {return d;});                         </script></body>
</html>

（3）运行结果

2.D3与数据库连接操作

（1）JSP链接数据库并可视化

1、加载驱动程序

String driverName="com.mysql.jdbc.Driver";

2、访问的数据库：IP+数据库+数据表

IP地址：互联网或者局域网的IP地址
数据库用户名：String userName="root";
数据库密码：String userPasswd="123456";
数据库名：String dbName="endword";
表名：String tableName="map_enword";

3、建立链接

String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd;
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection=DriverManager.getConnection(url);
Statement statement = connection.createStatement();

4、关闭链接

rs.close();
statement.close();
connection.close();

5、需要安装的相关软件或者插件

JSP应用——链接数据库.JAR（Tomcat\lib下）——English.SQL建库脚本——MySQL安装配置以及相关软件——Tomcat7,8,9——jdk7,8,9

6、JSP取的MySQL数据——>JS数组

（1）服务器JSP抽取<% %>之间的内容，构造.java文件，生成.class文件，从数据库取数据，并返回；
（2）数据传到客户端，D3.JS解析JavaScript中D3部分的代码;
(3)JavaScript由浏览器解析，根据DOM、HTML、SVG、CSS生成页面内容。

（2）代码:统计单词结果

<html>
<head>
<meta charset="utf-8">
</head>
<body><div id="wc"></div>
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" pageEncoding="utf-8"%>
<% out.print("<center><h1><font color=blue>Matrix Word Cloud English Learning</h1></center>"); //驱动程序名 String driverName="com.mysql.jdbc.Driver"; //数据库用户名 String userName="root"; //密码 String userPasswd="123456"; //数据库名 String dbName="engword"; //表名 String tableName="map_enword"; //联结字符串 String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd; Class.forName("com.mysql.jdbc.Driver").newInstance(); Connection connection=DriverManager.getConnection(url); Statement statement = connection.createStatement(); int count[]=new int[26];for(int i=0;i<26;i++){int aa=Integer.valueOf('a')+i;char cha = (char) aa;//out.print(aa);out.print(cha);       //输出每个字母的值//String sql="SELECT * FROM "+tableName+" where english like 'a%' "+"order by english"; String sql="SELECT * FROM "+tableName+" where english like '"+cha+"%' "+"order by english"; ResultSet rs = statement.executeQuery(sql);  // 输出每一个数据值 String str;int j=0;while(rs.next()) { str=(rs.getString(2)).substring(0,1);out.print(str+" "); j++;}out.print(" "+j+" <br>"); count[i]=j;rs.close();}statement.close(); connection.close();
%><script src="d3.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=w;var color=d3.scale.category10();var width = 1;var height = 1;var dataset=new Array(26);var dataAlphabet=new Array(26);<% for(int i=0;i<26;i++){  %>dataset[<%=i%>]=<%=count[i]%>;dataAlphabet[<%=i%>]=String.fromCharCode(<%=65+i%>);<%}%>var ww=w/dataset.length;var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);//绘制饼图var pie = d3.layout.pie().sort(null);    //定义饼图的布局var piedata = pie(dataset);               //将数据传给pie,就可以得到绘图的数据var outerRadius = 200; //外半径var innerRadius = 50; //内半径，为0则中间没有空白                   var sum=0;piedata.forEach(function(d,i){d._endAngle=d.endAngle;//保存这个值，后面动画要用到。d.endAngle=d.startAngle;//让每个弧的弧度都是0d.duration=2001*(d.data/d3.sum(dataset));d.delaytime=sum;sum+=d.duration;})var arc = d3.svg.arc() //弧生成器.innerRadius(innerRadius) //设置内半径.outerRadius(outerRadius); //设置外半径var arcs = svg.selectAll("g")     //先添加分组元素，用来存放一段弧的相关元素.data(piedata).sort(d3.ascending).enter().append("g").attr("transform", function(d,i){return "translate(" + (width*360) + "," + (height*150*2.8) + ")";});arcs.append("path")      //给每个分组元素g添加一个路径.attr("fill", function(d, i) {return color(i);}).attr("d", function(d, i) {return arc(d);}).transition()                  //过渡动画效果.duration(function(d,i){       //格式化时间，时间周期return d.duration;}).ease("linear").delay(function(d,i){console.log(d.delaytime)return d.delaytime;}).attr("d", function(d, i) {d.endAngle=d._endAngle;console.log(d);return arc(d);             //通过之前定义的弧生成器来转化数据}); /*arcs.append("text").attr("transform", function(d) {//arc.centroid计算出每个弧的中心位置return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "end").text(function(d) {return d.data;})    */      //绘制直方图var rect=svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",function(d,i){return i*w/dataset.length}).attr("y",function(d){return 0.95*h-d}).attr("width",ww*0.95).attr("height",function(d){return d}).attr("fill",function(d,i){return color(i)});var rect=svg.selectAll("text.value").data(dataset).enter().append("text").attr("x",function(d,i){return i*w/dataset.length}).attr("y",function(d){return 0.965*h-d}).text(function(d){return d}).attr("text-anchor","middle")                         .attr("dx",ww/2).attr("dy","-1em").attr("text-anchor","middle").attr("fill",function(d,i){return color(i)});  var rectA=svg.selectAll("text.title").data(dataAlphabet).enter().append("text").attr("x",function(d,i){return i*w/dataAlphabet.length}).attr("y",function(d){return 0.95*h+20}).text(function(d){return d}).attr("dx",ww/2).attr("dy","-1em").attr("text-anchor","middle").attr("fill","black");                          </script>
</body>
</html>

（3）运行结果

3.D3与力导向图

（1）D3文件操作

1、d3.v3.js
d3.json()；json文件
d3.csv()； csv表格
d3.text()；text文本

2、Json格式文件
json是存储和交换文本信息的语法。类似XML。
json比XML更小、更快、更易简析
json是文本
json具有“自我描述性”（人类可读）
json具有层级结构（值中存在值）
json可通过 JavaScript 进行解析
json数据可使用 AJAX 进行传输

（2）绘制力导向图过程

（2）代码：绘制红楼梦中人物关系图

<html>    <head>      <title>《红楼梦》人物关系</title><style>path{fill: none;stroke: #666;stroke-width: 1.5px;}circle {stroke: #333;stroke-width: 1.5px;}text {font: 10px sans-serif;pointer-events: none;}.tooltip{  position: absolute;  width: 240px;  height: auto;  font-family: simsun;  font-size: 10px;text-align: left;  color: black;  border-width: 1px solid black;  background-color: 7FFF00;  border-radius: 3px;  }  .tooltip:after{   content: '';  position: absolute;  bottom: 100%;  left: 20%;  margin-left: -3px;  width: 0;  height: 0;  border-bottom: 12px solid black;  border-right: 12px solid transparent;  border-left: 12px solid transparent;  }  </style>  </head>   <body style=" opacity:1"  bgcolor=#E6E6FA> <script src="d3.min.js" charset="utf-8" ></script>   <script >  var  width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;var  height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*1.0;var  img_h=50;var  img_w=50;var  radius=10;var svg=d3.select("body")  .append("svg")  .attr("width",width)  .attr("height",height); svg.append("text").attr("font-size","100px").attr("text-anchor","middle").text("红楼梦中人物关系图").attr("x",580).attr("y",30).attr("fill","black");svg.append("text").attr("font-size","16px").attr("text-anchor","middle").text("数据来源：").attr("x",650).attr("y",80).attr("fill","black");                 svg.append("text").attr("font-size","14px").attr("text-anchor","middle").text("百度百科").attr("x",720).attr("y",80).attr("fill","blue");    var nodes=[{name:"宁府：贾代化",image:"贾代化.jpg",intro:"中国古典小说《红楼梦》虚拟角色。贾演长子，贾敷、贾敬之父，贾珍、贾惜春祖父，贾蓉、贾蔷曾祖父；第二代宁国公、京营节度使世袭一等神威将军；因长子贾敷早夭，故死后次子贾敬袭爵。"},{name:"宁府：贾敬",image:"贾敬.jpg",intro:"贾敬，中国古典小说曹雪芹写的《红楼梦》中的人物，宁国公贾演的孙子，京营节度使世袭一等神威将军贾代化的次子，贾珍之父。"},{name:"宁府：贾珍",image:"贾珍.jpg",intro:"贾珍，中国古典小说《红楼梦》中的虚拟角色，贾敬之子，宁国公贾演曾孙。世袭三品爵威烈将军。生活穷奢极欲，为人荒淫无耻；虽妻妾成群，但仍和儿媳秦可卿私通、与妻妹尤二姐尤三姐玩弄暧昧。"},{name:"宁府：贾赦",image:"贾赦.jpg",intro:"贾赦，中国古典小说《红楼梦》中的虚拟角色，字恩侯，荣国公贾源之孙，贾代善和贾母的长子，贾政、贾敏的长兄，邢夫人的丈夫，贾琏、贾琮、迎春的父亲，是个无耻之徒，袭了一等将军的爵位。"},{name:"宁府：贾代善",image:"贾代善.jpg",intro:"中国古典小说《红楼梦》未登场虚拟角色。荣国公贾源之子，贾源死后袭封荣国公。妻子贾母（又称史老太君）。 代善夫妻育有两子四女；其中有姓名的分别是：贾赦、贾政和贾敏。 贾代善临终上本皇帝，长子贾赦袭爵，次子贾政授工部主事之职，居贾府正厅荣禧堂。"},{name:"贾母",image:"贾母.jpg",intro:"贾母，又称史老太君，贾府上下尊称她为“老太太”“老祖宗”，是中国古典小说《红楼梦》中的主要角色之一，娘家史氏为四大家族之一。贾母是贾府的最高统治者，她是贾赦、贾政和贾敏的母亲，贾宝玉的祖母，林黛玉的外祖母，史湘云是其内侄孙女。她是封建贵族的代表人物，一生享尽荣华富贵。"},{name:"荣国府：贾政",image:"贾政.jpg",intro:"贾政，字存周，是曹雪芹著作《红楼梦》中的人物，荣国府二老爷，贾母和贾代善所生的次子，贾宝玉的父亲，林黛玉的舅舅，薛宝钗的姨父。"},{name:"荣国府：王夫人",image:"王夫人.jpg",intro:"王夫人是在中国古典小说《红楼梦》中登场的虚拟人物，她是贾珠、宝玉和元春之母，贾政之妻，是贾府掌权者之一。她为了独子贾宝玉的名誉及前程考虑而极力支持金玉良缘，希望外甥女薛宝钗成为自己的儿媳妇"},{name:"荣国府：贾敏",image:"贾敏.jpg",intro:"贾敏是清代小说《红楼梦》中的人物，她是贾代善与史太君之女，也是林黛玉之母。谈吐不凡，在《红楼梦》这本名著中作为已故人物出场。贾母最疼爱的小女儿，嫁与巡盐御史林如海为妻。育有一女林黛玉。又生一子，三岁时夭折。早逝。"},{name:"林如海",image:"林如海.jpg",intro:"林如海，中国古典小说《红楼梦》中的人物，姑苏林家的子孙，姓林，名海，字如海。本贯姑苏。贾母的女婿，林黛玉的父亲。祖上世袭侯爵，至本人以科第（探花）出身，历任“兰台寺大夫”、“巡盐御史”等职。后病死扬州，归葬原籍。"},{name:"林黛玉",image:"林黛玉.jpg",intro:"林黛玉，中国古典名著《红楼梦》的女主角。母亲贾敏是贾代善和贾母四个女儿里最小的女儿。林黛玉是贾母的外孙女，贾宝玉的姑表妹、恋人、知己，贾府通称林姑娘。"},{name:"史候",image:"史侯.jpg",intro:"红楼梦中史侯是史湘云祖父的父亲，有两个孩子，分别是史太君和史湘云祖父。"},{name:"史湘云祖父",image:"史湘云祖父.jpg",intro:"史侯的儿子，史湘云的祖父"},{name:"袭人",image:"袭人.jpg",intro:"袭人：全名“花袭人”，中国古典小说《红楼梦》中的重要人物，金陵十二钗又副册第二位，宝玉房里大丫鬟之首。原名珍珠(程乙本作“蕊珠”)，从小因家贫被父母卖入贾府为婢，原是跟着贾母，起先服侍史湘云几年，贾母见袭人心地纯良，恪尽职守，便命她服侍贾宝玉，成为贾宝玉的首席丫鬟。曾与贾宝玉“偷试云雨情”，最终嫁给“蒋玉菡”。"},{name:"秦可卿",image:"秦可卿.jpg",intro:"中国古典小说《红楼梦》中的人物，金陵十二钗之一。贾蓉之妻，秦业的养女。她还有个无血缘关系的弟弟秦钟。来自仙界清净女儿之境，是太虚幻境之主警幻仙子的妹妹，官名兼美，乳名可卿，小名可儿"},{name:"王熙凤",image:"王熙凤.jpg",intro:"王熙凤，中国古典小说《红楼梦》中的人物，金陵十二钗之一，贾琏的妻子，王夫人的侄女，贾府通称凤姐、琏二奶奶。"},{name:"薛王氏",image:"薛王氏.jpg",intro:"薛宝钗母亲"},{name:"薛宝钗",image:"薛宝钗.jpg",intro:"薛宝钗，是曹雪芹著长篇章回体小说《红楼梦》中的女主角之一，与林黛玉并列为金陵十二钗之首，贾宝玉的从母姊（姨姊）、妻子。"},{name:"贾宝玉",image:"贾宝玉.jpg",intro:"贾宝玉，中国古典名著《红楼梦》中的男主角。前世真身为赤霞宫神瑛侍者，荣国府贾政与王夫人所生的次子。因衔通灵宝玉而诞，系贾府玉字辈嫡孙，故名贾宝玉，贾府通称宝二爷。"}];var edges=[  {source:0,target:1,relation:"父子"},{source:0,target:3,relation:"父子"},{source:0,target:4,relation:"堂兄弟"},{source:1,target:2,relation:"父子"},{source:2,target:14,relation:"乱伦"},{source:3,target:1,relation:"叔侄"},{source:4,target:6,relation:"父子"},{source:4,target:5,relation:"夫妻"},{source:4,target:8,relation:"父女"},{source:5,target:6,relation:"母子"},{source:5,target:13,relation:"主仆"},{source:5,target:8,relation:"母女"},{source:5,target:10,relation:"祖孙，贾母最疼爱的外孙女"},{source:6,target:18,relation:"父子"},{source:6,target:7,relation:"夫妻"},{source:6,target:8,relation:"兄妹"},{source:6,target:16,relation:"公媳"},{source:6,target:7,relation:"夫妻"},{source:7,target:15,relation:"婆媳"},{source:7,target:18,relation:"母子"},{source:7,target:16,relation:"姐妹"},{source:8,target:10,relation:"母女"},{source:9,target:8,relation:"夫妻"},{source:9,target:10,relation:"父女"},{source:10,target:17,relation:"情敌，姐妹，同为金陵十二钗之首"},{source:11,target:12,relation:"父子"},{source:11,target:5,relation:"父女"},{source:12,target:6,relation:"兄妹"},{source:14,target:18,relation:"乱伦（初试云雨）"},{source:14,target:15,relation:"闺蜜"},{source:15,target:18,relation:"叔嫂"},{source:16,target:15,relation:"姨妈和外甥女"},{source:16,target:17,relation:"母女"},{source:17,target:18,relation:"夫妻"},{source:18,target:10,relation:"表兄妹（恋人）"}];var force=d3.layout.force().nodes(nodes).links(edges).size([width,height]).linkDistance(235).charge(-800).start();  //提示框部分var tooltip=d3.selectAll("body")  .append("div")  .attr("class","tooltip")  .style("opacity",0.0); //箭头绘制 var defs = svg.append("defs");var radius=10;var arrowMarker = defs.append("marker").attr("id","arrow").attr("markerUnits","strokeWidth").attr("markerWidth","4").attr("markerHeight","4").attr("viewBox","0 0 4 4").attr("refX",20+radius/8-2)   //实际是radius/strokeWidth.attr("refY",2).attr("orient","auto");var arrow_path = "M0,1 L4,2 L0,3 L0,0";arrowMarker.append("path").attr("d",arrow_path);    var color=d3.scale.category20();var path = svg.selectAll("path").data(edges).enter().append("path").attr("id", function(d,i) {return "edgepath" +i;}).attr("class","edges").attr("marker-end","url(#arrow)");    var pathtext = svg.selectAll('.pathText').data(edges).enter().append("text").attr("class","pathText").append('textPath').attr("text-anchor", "middle")//居中.attr("startOffset","60%").style("fill",function(d,i){return color(i);}).attr('xlink:href', function(d,i) { return "#edgepath" + i; }).text(function(d) { return d.relation; });    var  img_h=50;var  img_w=50;var  radius=23;                              var  circles=svg.selectAll("forceCircle").data(nodes).enter().append("circle").attr("class","forceCircle").attr("r",radius)                 .style("stroke","black").style("stroke-width","1.0px").attr("fill", function(d, i){//创建圆形图片var defs = svg.append("defs").attr("id", "imgdefs");var catpattern = defs.append("pattern").attr("id", "catpattern" + i).attr("height", 1).attr("width", 1);catpattern.append("image").attr("x", - (img_w / 2 - radius+5.8)).attr("y", - (img_h / 2 - radius+3.5)).attr("width", img_w+11).attr("height", img_h+6).attr("xlink:href",d.image);return "url(#catpattern" + i + ")";}).on("mouseover",function(d,i){    //加入提示框tooltip.html("角色简介："+d.intro).style("left",(d3.event.pageX)+"px")  .style("top",(d3.event.pageY+20)+"px")   .style("opacity",1.0);  }).on("mousemove",function(d){            tooltip.style("left",(d3.event.pageX)+"px")  .style("top",(d3.event.pageY+20)+"px"); })   .on("mouseout",function(d){  tooltip.style("opacity",0.0); }).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("fill",function(d,i){return color(i);}).style("font-size",15).attr("dx","-1.5em").attr("dy","2em").text(function(d){return d.name;});force.on("tick",function(){path.attr("d", function(d) {var dx = d.target.x - d.source.x;//增量var   dy = d.target.y - d.source.y;return "M" + d.source.x + ","+ d.source.y + "L" + d.target.x + "," + 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;});});</script></body>
</html>

（3）运行结果

总结

以上就是与D3有关的数据可视化，后续还会继续补充与数据可视化的操作，希望路过的大佬指正请教。

数据可视化之小白学习篇（一）

《数据可视化》之小白学习篇（二）相关推荐

《数据可视化》之小白学习篇（一）
本博客记录这学期关于数据可视化的一些学习,由于我是一个菜鸟,编程能力很弱,希望看到的大佬不要笑话. 文章目录前言一.为什么要数据可视化? 二.数据可视化基础篇 1.Javascript实现直方图绘 ...
帆软FineReport学习篇(二)
帆软FineReport学习篇(二) 1 制作报表的流程 1.新建数据流程用于连接数据库 2 新建报表类型是普通报表还是决策报表 3 新建数据集从数据库中取出数据 4 报表设计 5 报表预览查 ...
计算机网络教程网线制作,图吧小白教程篇二十六：手把手教你自制网线（夹网线水晶头）...
图吧小白教程篇二十六:手把手教你自制网线(夹网线水晶头) 2019-11-19 23:07:38 31点赞 309收藏 27评论创作立场声明:咕咕咕教程最后还是出了,不过咱现在用啥还是直接网购号 ...
科学计算机后盖换电池,图吧小白教程篇二十二：手把手教你给手机换电池（拆机）...
图吧小白教程篇二十二:手把手教你给手机换电池(拆机) 2019-11-16 14:06:58 4点赞 18收藏 2评论创作立场声明:手机换电池省钱可以自己动手从工钱上省,买电池最好还是不要省钱买杂 ...
机器学习--Iris数据集的Fisher线性分类以及数据可视化技术的学习
Iris数据集的Fisher线性分类以及数据可视化技术的学习 1.Iris数据集的Fisher线性分类 2.数据可视化技术的学习 1.数据集介绍 2.观看数据前5行 3.特征工程 1.数据清洗 2.数 ...
python画图怎么调色_数据可视化Seaborn从零开始学习教程（二）颜色调控篇
作者:xiaoyu 微信公众号:Python数据科学知乎:python数据分析师 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理绘图风格设置颜色风格设置绘图方 ...
Python数据可视化教程之基础篇
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达开运张 | 作者知乎专栏 | 来源 https://zhuanlan.zhihu.c ...
python数据查询教程_Python数据可视化教程之基础篇
经过学习之后,我总结了利用python实现可视化的三个步骤: 确定问题,选择图形转换数据,应用函数参数设置,一目了然 1 首先,要知道我们用哪些库来画图? matplotlib python中最基 ...
菜鸟数据分析师对数据可视化的理解—完整篇
感谢关注天善智能,走好数据之路↑↑↑ 欢迎关注天善智能,我们是专注于商业智能BI,大数据,数据分析领域的垂直社区,学习,问答.求职一站式搞定! 本人新人一枚,是个菜鸟数据分析师,统计学专业,接触数据分 ...
CNCC2019第二天 | 从互联网、数据可视化、深度学习到AI，智能+社会还有多远
上有天堂下有苏杭,你和大佬只差一扇窗.没错,这扇窗就是计算机工作者们的年度狂欢盛会--CNCC. 姑苏城外,金鸡湖畔,桂花怒放,满城飘香.金秋时节,CNCC2019如期而至,于10月17~19日和大伙 ...

《数据可视化》之小白学习篇（二）

数据可视化

文章目录

前言

一、D3相关操作

1.D3绘制直方图与饼图

（1）基础知识

2.D3与数据库连接操作

（1）JSP链接数据库并可视化

（2）代码:统计单词结果

（3）运行结果

3.D3与力导向图

（2）代码：绘制红楼梦中人物关系图

（3）运行结果

总结

《数据可视化》之小白学习篇（二）相关推荐

最新文章

热门文章