零、tomcat前端tomcat下载https://Tomcat.Apache.org/2 .启动组件默认路径c :program filesapachesoftware
web文件一般位于webapps文件夹中，可以用Notepad创建。 创建后，可以在浏览器中输入本地地址/文件名/html文件名以查看结果。 例如，我的一项工作是http://127.0.0.133608080/dataviz 2021/graph.html
dataviz2021是我在webapps下创建的文件夹，对graph.html进行编码。
后面是更方便使用的前后端工具。
一、基于D3的直方图、饼图的制作(施工)二、基于基本力导向和基于Path的力导向)三、基于D3的词云图1.D3.JS词云图
33559 www.Jason Davies.com/word cloud /
2 .必要准备： d3.layout.cloud.js软件包下载位置： link
包在build文件中，使用时将其复制并粘贴到与web文档相同的文件夹下。
编写代码时，必须首先加载本地d3.v3.min.js包，然后加载d3.layout.cloud.js包。
如果前者是以网络格式加载的
script src=' http://d3js.org/D3.v3.min.js ' charset=' utf-8 '/script在本例中，重新行本地d3.layout.cloud.js软件包
正确的写法
script src=' D3.v3.min.js ' charset=' utf-8 '/script src=' D3.layout.cloud.js '/script都以网络格式装载
3 .字云布局var WC=D3.layout.cloud (.size ([ 1000，600 ] ).words ).padding(5)5).rotate (函数) ) }.on(end )，draw ).start )； 各构成项目的信息可以看到link。
functiondraw(words ) D3.select (body ).append (SVG ).attr (width )，1000 ).attr (height )，500 ) )。 200 () )、selectall (、text、data )、words )、enter )、append )、text )、style )、font-size )、function(d ) }.attr(text-anchor )，middle ) ).attr ) ) transform )，function(d ) {return ) translate ) [d.x，d.y ] } )； (四、地图可视化1.GeoJSON GeoJSON )将JSON格式应用于地理文件
地图要注意政治因素，有关敏感地区主权的问题要慎重！
原理是球形墨卡托投影，这个子
3359 Hu Jiulong.github.io/what-is-the-mercator-projection /
2 .地图读入根据原理首先投影地图
//var projection=D3.geo.mercator (.center ([ 107，36 ].scale ) 5000 ).translate [ width/2，heiggeo ]
//China.geojsond3. JSON (China.geo JSON )、function(error，root )和if(error ) returnconsole.error ) vargroups=SVG.append('g )； groups.selectall(path ).data ) root.features ).enter ).append ) path ).attr ) class )，province )。 //五颜六色().attr )、path )； //使用路径生成器}； 其中省边界线的设定在style
. province {stroke: black； stroke-width: 1px； }
关于中国地图绘制的可视化请不要忘记南海！
//southchinasea.svgd3. XML (southchinasea.SVG )、function(error，xmlDocument ) SVG.html ) (function ) d )请求D3.select(#southchinasea ().attr、(transform )、() translate (840，380 ) scale (0.5 ) )、(attr ) ) class ) 可以用style修改南海地区的svg，
. southchinasea {stroke: black； //绘图颜色stroke-width: 1px； //绘图点大小fill: #F0FFFF； //阴影部分的颜色(3.润色例如可以标记地名
vartexts=SVG.selectall(.texts ).data ) root.features ).enter ).append('text ' ).attr ) class '，' class if () d.properties.name=='河北'|) d.properties.name=='澳门'|(d.properties.name=='安徽') )/rperties/}.attr(fill )、(green ) )、attr )、(font-size )、(12px )； )； 同样，可以导入其他geojson进行d3的可视化，添加配色和交互。
五.互动与动画1 .立方体vartooltip=D3.select(body ) )、append )、div )、attr )、tooltip )、style ) opacity style )
syle.tooltip { font-family : simsun； 字体大小： 14px； width: 120； height :自动； 定位：助手； 文本照明3360中心； border-style: solid； border-width: 1px； background-color: white； border-radius: 5px； (}/style与交互组合后可以编入. on ) )
. on(mouseover )、function(d，I ) (tooltip.html ) ) rating:) (rate(I )/10000 ) % ).style )、left、left }.on(mouseout )，function(d ) d，I ) (tooltip.style ) opacity )，0.0 )； )2.触摸变色实际上是指用. on ) )函数截获事件，用mouseover变色，用mouseout还原
. on(mouseover )、function(d ) d，I ) D3.select ) this ).attr )、' fill '、' gray ' )； //元素变成灰色).on('mouseout '，function(d ) d，I ) ) D3.select(this ).attr ) ' fill '，color ) rate[I]； //颜色恢复为设定的颜色)3.动画(施工).transition ).duration ) 500 ).ease )、JSP链接数据库(施工) )。