数据可视化课程整理与心得（1） |
您所在的位置：网站首页 › 对数据可视化的感受 › 数据可视化课程整理与心得（1） |
数据可视化课程整理与心得（1）
|
零、tomcat前端
1.下载tomcat→https://tomcat.apache.org/
2.启动组件
默认路径C:\Program Files\Apache Software Foundation\Tomcat 10.0\bin 后面还会有更好用的前后端工具。 一、基于D3的直方图、饼图的绘制（施工） 二、基本力导向与基于Path的力导向（施工） 三、 基于D3的词云图 1.D3.JS词云图
下载地址：link 包在build文件里，用的时候将其复制粘贴在网页文档同文件夹下。 在进行代码编写的时候必须先加载本地d3.v3.min.js包，然后加载d3.layout.cloud.js包。 如果前者是以网络形式加载的↓ 这种情况下再加载本地d3.layout.cloud.js包会报错 正确写法↓ 也可以两个都网络形式挂载，但好像要科学上网，而且会比较慢。 3.词云图布局 var wc=d3.layout.cloud() .size([1000, 600]) .words(words) .padding(5) .rotate(function() { return ~~(Math.random() * 2) * 90; }) .font("Impact") .fontSize(function(d) { return d.size; }) .on("end", draw) .start();各配置项的信息可以看→link. function draw(words) { d3.select("body").append("svg") .attr("width", 1000) .attr("height",500) .append("g") .attr("transform", "translate(300,200)") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("font-family", "Impact") .style("fill", function(d, i) { return fill(i); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); } 四、 地图可视化 1.GeoJSONGeoJSON：将JSON的格式应用于地理上的文件 原理是球形墨卡托投影，这个亚子↓ https://hujiulong.github.io/what-is-the-mercator-projection/ 2.地图载入基于原理首先要对地图进行投影 //定义地图的投影 var projection = d3.geo.mercator() .center([107, 36]) .scale(5000) .translate([width/2, height/2]);//定义地形路径生成器 var path = d3.geo.path() .projection(projection); //设定投影以中国地图为例，请求china.geojson //请求china.geojson d3.json("China.geojson", function(error, root) { if (error) return console.error(error); console.log(root); var groups = svg.append("g"); groups.selectAll("path") .data(root.features) .enter() .append("path") .attr("class","province")//划分好省界线 .style("fill", function(d,i){ return color(i);//五颜六色 }) .attr("d", path ); //使用路径生成器 });其中省界线的设置在style中 .province { stroke: black; stroke-width: 1px; }
绘制中国地图相关的可视化一定不要忘记南海！！！ 可以在style中对南海地区的svg进行修改， .southchinasea { stroke: black;//绘点颜色 stroke-width: 1px;//绘点大小 fill: #F0FFFF;//阴影部分的颜色 } 3.润色比如可以把地名标注上 var texts = svg.selectAll(".texts") .data(root.features) .enter() .append("text") .attr("class", "texts") .text(function(d){return d.properties.name;}) .attr("transform", function(d) { var centroid = path.centroid(d), x = centroid[0], y = centroid[1]; if((d.properties.name=="河北")||(d.properties.name=="澳门")||(d.properties.name=="安徽"))//边界冲突的美化处理 y=y+25; return "translate(" + x + ", " + y + ")"; }) .attr('fill','green') .attr("font-size","12px"); });同样可以导入其他geojson进行d3可视化，添加配色和交互。 五、交互与动画 1.提示框 var tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("opacity",0.0);需要在style里定义好tooltip的形式 .tooltip{ font-family: simsun; font-size: 14px; width: 120; height: auto; position: absolute; text-align: center; border-style: solid; border-width: 1px; background-color: white; border-radius: 5px; }可以结合互动套入.on()中 .on("mouseover",function(d,i){ tooltip.html("Rating："+(rate[i]/10000)+"%") .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,i){ tooltip.style("opacity",0.0); }) 2.触摸变色实际上就是用.on()函数监听事件，mouseover时变色，mouseout时变回 .on("mouseover",function(d,i){ d3.select(this) .attr("fill","gray");//元素变为灰色 }) .on("mouseout",function(d,i){ d3.select(this) .attr("fill",color(rate[i]));//颜色变回设定好的颜色 }) 3.动画（施工） .transition() .duration(500) .ease("linear") 六、JSP链接数据库（施工） |
网页文件一般在webapps文件夹里，可以用Notepad++进行编写，编写完后可以在浏览器上输入本机地址/文件名/html文件名看出成果，比如我的一个作业是 http://127.0.0.1:8080/dataviz2021/graph.html dataviz2021是webapps下我创建的文件夹，对graph.html进行代码编写。
https://www.jasondavies.com/wordcloud/
地图一定要注意政治因素，敏感地区与主权相关问题一定要谨慎！！！
【本文地址】
今日新闻 |
推荐新闻 |