数据可视化过程记录

最新推荐文章于 2022-11-21 16:29:46 发布

weixin_46932690

最新推荐文章于 2022-11-21 16:29:46 发布

阅读量183

点赞数

文章标签：数据可视化

本文链接：https://blog.csdn.net/weixin_46932690/article/details/117306597

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、代码大致归总
二、js和d3实现
- 1.简单对于矩阵饼图的实现框架
- 2.加入数据库数据以及交互
总结

前言

记录数据可视化的相关代码框架

一、代码的大致归总

1.矩阵的js和d3实现
2.tree和文字树的js实现
3.矩阵饼图交互以及链接数据库之后的矩阵和饼图的交互
4.力导向图（链接数据库）

存储学习过程中关于数据可视化的代码
基于js和D3

D3：
添加d3链接：
<script src="https://d3js.org/d3.v6.min.js" charset="utf-8">
</script>

获得页面宽高：
w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innnerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

添加body:
js： document.getElementById("mySVG");
d3: var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);

添加矩阵：
js：
document.createElement("rect");
svg.appendChild();

d3:
svg.append('rect')

批量添加：text1=svg.selectAll

树形：
js(添加line的形式进行角度转换得到树）：
svgline= document.createElement("line");
mysvg.appendChild(svgline);
svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgb(99,99,99);stroke-width:2' />";

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、js和d3

1.简单对于矩阵饼图的实现框架：

#js实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg id="mySVG" width="800" height="600" ></svg>
<script type="text/javascript">
var mysvg = document.getElementById("mySVG");
var rec= new Array();
for(var i=0;i<6;i++){
rec[i] = document.createElement("rect");
mysvg.appendChild(rec[i]);
var h=Math.random()*300;
//rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(400-h)+" width=70 height="+h+" style='fill:red'/>";
//rec[i].outerHTML="<rect x="+(60*i)+" y="+(400-h)+" width=55 height="+h+" style='fill:rgb(0,0,255)'/>";
//rec[i].outerHTML="<rect x="+(60*i)+" y="+(400-h)+" width=55 height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
rec[i].outerHTML="<rect x="+(45*i)+" y="+(400-h)+" width=42 height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";

}
</script>
</body>
</html>


#d3实现矩阵

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<svg id = "mysvg" width=100> height=100>
</svg>
<script src="https://d3js.org/d3.v6.min.js" charset="utf-8">
</script>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innnerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w=w*0.9
h=h*0.98
var rec=new Array(10);
var txt=new Array(10);
var data=[33.9,56.9,33.97,36.5,46.8,42.5,50.3,31.6,45.1,53.6];
var height=[339,569,339.7,365,468,425,503,316,451,536];
var data1=["美人鱼","战狼2","唐探2","红海行动","流浪地球","复联4","哪吒","我和我的祖国","唐探3","李焕英"]
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);

var scaleX = d3.scaleBand().domain(data1).range([0, w])


var axisX = d3.axisBottom(scaleX);


svg.append('g').attr("class","axis")
.attr("x",0)
.attr("transform",'translate(0,715)')
.call(axisX);



var text1=svg.selectAll("rect")
.data(height)
.enter()
.append("rect")
.attr("fill",function(d,i){
return d3.rgb(150,200,data[i]*5);
})
.attr("x",function(d,i){
return i*w/10
})
.attr("y",function(d,i){
return (h-d-50)
})
.attr("width",function(d,i){
return 0.9*w/data.length
})
.attr("height",function(d){
return d
});

svg.selectAll("text.value")
.data(data)
.enter()
.append("text")
.attr("font-size","12px")
.attr("fill","black")
.attr("text-anchor","middle")
.attr("x",function(d,i){
return i*w/10;
})
.attr("y",function(d,i){
return h-d*10-50
})
.attr("dx",0.9*(w/data.length-10)/2)
.attr("dy","lem")

.text(function(d){
return d;
});
svg.selectAll("text.count")
.data(data1)
.enter()
.append("text")
.attr("font-size","12px")
.attr("fill","black")
.attr("text-anchor","middle")
.attr("x",function(d,i){
return i*w/10;
})
.attr("y",function(){
return 500;
})
.attr("dx",0.9*(w/data.length-10)/2)
.attr("dy","lem")
.text(function(d){
return d;
});

2.加入数据库数据以及交互

#d3实现交互饼图+链接数据库

!DOCTYPE html>
<body>
<div id="wc"></div>
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" %>
<%

//驱动程序名
String driverName="com.mysql.jdbc.Driver";
//数据库用户名
String userName="root";
//密码
String userPasswd="Xz8231600";
//数据库名
String dbName="sakila";
//表名
String tableName="p";
//联结字符串
String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd+"&useUnicode=true&characterEncoding=utf8&serverTimezone=UTC";
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection=DriverManager.getConnection(url);
Statement statement = connection.createStatement();

double[] count=new double[6];
int j=0;

//String sql="SELECT * FROM "+tableName+" where english like 'a%' "+"order by english";
String sql="SELECT percentage FROM p";
ResultSet rs = statement.executeQuery(sql);
// 输出每一个数据值

double str;



while(rs.next()){
count[j]=rs.getDouble("percentage");
j=j+1;
}



rs.close();




statement.close();
connection.close();
%>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var data=new Array(5);
var data1=["生物","物理","化学","地理","政治","历史"]
<% for(int i=0;i <6;i++){%>
data[ <%=i%> ]= " <%=count[i]%> ";<% } %>
// sort函数自动隐式执行降序排列，而且数据从顶部开始顺时针展示，传入null可以阻止排序
var pie = d3.layout.pie().sort(null);
//定义了10中颜色主题
var color = d3.scale.category10();
var svg = d3.select("body").append("svg").attr("width", width ).attr("height", height );
//定义外半径
var outerRadius = width / 5;
//定义内半径
var innerRadius = width / 10;
//定义路径
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);

//定义了另一种路径函数
var arc2 = d3.svg.arc()
.innerRadius(innerRadius - 10)
.outerRadius(outerRadius + 20)

var arcs = svg.selectAll("g")
.data(pie(data))
.enter()
.append("g")
// 将饼图中心(SVG起点)移至中间
.attr("transform", "translate(" + (outerRadius+500) + "," + (outerRadius+100) + ")")
//为每一块元素添加鼠标事件
.on("mouseover", function(d) {

d3.select(this).select("path").transition().attr("d", function(d) {
console.log(d);
return arc2(d);})
svg.append("text")
.attr("id","info")
.attr("x",200)
.attr("y",200)
.attr("text-anchor","middle")
.attr("font-size",36)
.text(data1[i]);
svg.append("text")
.attr("id","value")
.attr("x",200)
.attr("y",200)
.attr("text-anchor","middle")
.attr("font-size",36)
.text(d+"%");

})
.on("mouseout", function(d){
d3.select(this).select("path").transition().attr("d", function(d){
return arc(d);
})
})
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", function(d) {
return arc(d);
})
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i) {
return data1[i]+d.value+"%";
})
svg.append("text").text("数据来源：数据表").attr("x",15).attr("y",45)
svg.append("text").text("版权信息：秦雪静吴羽琦").attr("x",15).attr("y",60)
svg.append("text").text("广东省2021年新高考学生选课情况").attr("x",300).attr("y",50).attr("fill","green").attr("font-size","60px")
</script>

#d3实现交互矩阵

 var color=d3.scale.category10(); #颜色随机得到10种



var text1=svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("fill",function(d,i){
              return color(i);
            })
   .attr("x",function(d,i){
      return i*w/6
})
   .attr("y",function(d,i){
  return (h-d*10-50)
})
   .attr("width",function(d,i){
    return 0.3*w/data.length
})
   .attr("height",function(d){
       return d*10
   })
   .on("mouseover",function(d,i){  #交互
          d3.select(this)
              .attr("fill","yellow");

      })
   .on("mouseout",function(d,i){  #交互
          d3.select(this)
              .attr("fill",color(i))
      });

  svg.selectAll("text.value")
            .data(data)
            .enter()
            .append("text")
            .attr("font-size","12px")
            .attr("fill","black")
            .attr("text-anchor","middle")
            .attr("x",function(d,i){
              return i*w/6-70;
            })
            .attr("y",function(d,i){
             return h-d*10-50
  })
            .attr("dx",0.9*(w/data.length-10)/2)
            .attr("dy","lem")

            .text(function(d){
              return d;
            });
    svg.selectAll("text.count")
            .data(data1)
            .enter()
            .append("text")
            .attr("font-size","12px")
            .attr("fill","black")
            .attr("text-anchor","middle")
            .attr("x",function(d,i){
              return i*w/6-50;
            })
            .attr("y",function(){
                   return 680;
                   })
            .attr("dx",0.9*(w/data.length-10)/2)
            .attr("dy","lem")
            .text(function(d){
              return d;
            });

该处使用的url网络请求的数据。

总结

更多完整代码可以参考：

https://github.com/qxj-gd/-

weixin_46932690

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化过程记录

此文件中主要有：1.矩阵的js和d3实现2.tree和文字树的js实现3.矩阵饼图交互以及链接数据库之后的矩阵和饼图的交互4.力导向图（链接数据库）存储学习过程中关于数据可视化的代码基于js和D3D3：添加d3链接： <script src="https://d3js.org/d3.v6.min.js" charset="utf-8"> </script>获得页面宽高： w = window.innerWidth ...
复制链接

扫一扫