D3(V7)树图绘制-数据可视化

点击对应的点可以在下方显示该地点的简介。鼠标停在某个点上该点会变色（图中没有体现出来）

数据来源：建筑-故宫博物馆

v7版本的资料实在太少了，所以写完记录一下……主要是记录v3和v7版本的差异

核心布局代码是这一句。一共有3种可写形式，最后出来的结果图形布局也不一样。

<script>
var tree=d3.cluster().size([width,height*0.7]);
//d3.tree().size([2*Math.PI, radius - 300]);
//d3.tree().size([width, height]);
//d3.cluster().size([2*Math.PI, radius - 100]);
</script>

读取json文件后需要做处理，即进行：原数据-计算层级信息-计算坐标位置-绘制（续）曲线和节点）d3.hierarchy(data)是用来计算层级机构的

<script>
console.log(data);
var hi=d3.hierarchy(data);
console.log(hi);
var root=tree(hi);
links=root.links();
console.log(links);
nodes=root.descendants();
console.log(nodes);
</script>

v7版本变化比较大的还有动画的呈现。比如以下tooltip。鼠标停留和移走用的是“mouseenter”和“mouseleave”，需要用一个select(this)调用当前对象

<script>
var tooltip=d3.select("body").append("div").attr("class","tooltip").attr("opacity",0.0);
var mynode=gc.selectAll("circle") .data(nodes).join("circle").attr("cx",d=>d.x).attr("cy",d=>d.y+90).attr("r",d=>(d.height+2)*3).attr("fill","#bb996e").attr("stroke","white")//读取到json文件里的introduction.attr("info",(d)=>d.data.intro)//鼠标停留.on("mouseenter",function(d,i){const change=d3.select(this).attr("fill","white")var t=change.attr("info")tooltip.html("简介："+t).style("visibility","visible")})//鼠标移走.on("mouseleave",function(d,i){const change=d3.select(this).attr("fill","#bb996e")})
</script>

整体代码还是比较简单的，就是因为网上v7资料太少所以写的时候报错折腾了很久……

全部代码：

mytreev3.htm

<html>
<head><meta charset="utf-8"><style type="text/css">body{background-image: url(故宫.jpg);background-repeat: no-repeat;background-size: 100%;}.tooltip{background: #eed5a4;line-height: 2;opacity:0.8;padding: 10px;font-size: 15px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;overflow: auto;}</style>
</head>
<body>
<script src="d3.v7.js"></script>
<script>var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth);var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight);width=width*0.9;height=height*0.95;var color = d3.schemeCategory10;var svg = d3.select("body")          //选择<body>.append("svg")            //在<body>中添加<svg>.attr("width", width)    //设定<svg>的宽度属性.attr("height", height);//设定<svg>的高度属性radius = width /2;var tree=d3.cluster().size([width,height*0.7]);d3.json("d3v3treeprovince.json").then(function(data) {console.log(data);var hi=d3.hierarchy(data);console.log(hi);var root=tree(hi);links=root.links();console.log(links);nodes=root.descendants();console.log(nodes);var gc=svg.append("g");var lines=gc.selectAll("path").data(links).enter().append("path").attr("fill","none").attr("stroke","#eed5a4").attr("d",d3.linkVertical()          //d3.linkHorizontal().x(d=>d.x).y(d=>d.y+90));var tooltip=d3.select("body").append("div").attr("class","tooltip").attr("opacity",0.0);var mynode=gc.selectAll("circle") .data(nodes).join("circle").attr("cx",d=>d.x).attr("cy",d=>d.y+90).attr("r",d=>(d.height+2)*3).attr("fill","#bb996e").attr("stroke","white").attr("info",(d)=>d.data.intro).on("mouseenter",function(d,i){const change=d3.select(this).attr("fill","white")var t=change.attr("info")tooltip.html("简介："+t).style("visibility","visible")}).on("mouseleave",function(d,i){const change=d3.select(this).attr("fill","#bb996e")})var nodetxt=gc.selectAll("text") .data(nodes).join("text").attr("x",d=>d.x+95).attr("y",d=>d.y-10).attr("font-size","15").attr("fill","#fffde4").attr("transform",d=>`rotate(90,${d.x},${d.y})`)         .text(d=>d.data.name);  var title=gc.append("text").text("故宫博物馆建筑分布（部分）").attr("x",width/2-200).attr("y",50).attr("font-size","40").attr("fill","white")})
</script>
</body>
</html>

d3v3treeprovince.json:

{"name": "故宫博物馆","children": [{"name": "外朝中路","intro":"","children":[{"name": "午门","intro":"午门是紫禁城的正门，位于紫禁城南北轴线。其前有端门、天安门（皇城正门，明代称承天门）、大清门（明代称大明门），其后有太和门（明代称奉天门，后改称皇极门，清代改今名）。各门之内，两侧排列整齐的廊庑。这种以门庑围成广场、层层递进的布局形式是受中国古代“五门三朝”制度的影响，有利于突出皇宫建筑威严肃穆的特点。"},{"name": "太和门","intro":"太和门是紫禁城内最大的宫门，也是外朝宫殿的正门。太和门建成于明永乐十八年（1420年），当时称奉天门。嘉靖四十一年（1562年）改称皇极门，清顺治二年（1645年）改今名。顺治三年（1646年）、嘉庆七年（1802年）重修，光绪十四年（1888年）被焚毁，次年重建。"},{"name": "太和殿","intro":"太和殿，俗称“金銮殿”，位于紫禁城南北主轴线的显要位置，明永乐十八年（1420年）建成，称奉天殿。嘉靖四十一年（1562年）改称皇极殿。清顺治二年（1645年）改今名。自建成后屡遭焚毁，又多次重建，今天所见为清代康熙三十四年(1695年)重建后的形制。"},{"name": "中和殿","intro":"中和殿，故宫外朝三大殿之一，位于紫禁城太和殿、保和殿之间。始建于明永乐十八年（1420年），明初称华盖殿，嘉靖时遭遇火灾，重修后改称中极殿，现天花内构件上仍遗留有明代“中极殿”墨迹。清顺治元年（1644年），清皇室入主紫禁城，第二年改中极殿为中和殿。殿名取自《礼记·中庸》：“中也者，天下之本也；和也者，天下之道也”之意。"},{"name": "保和殿","intro":"保和殿，故宫外朝三大殿之一。位于中和殿后，建成于明永乐十八年（1420年），初名谨身殿，嘉靖时遭火灾，重修后改称建极殿。清顺治二年改为保和殿。"},{"name": "体仁阁","intro":"体仁阁位于太和殿前广场内东侧，面西。始建于明永乐十八年（1420年），明初称文楼，嘉靖时改称文昭阁，清初改称体仁阁。乾隆四十八年（1783年）六月毁于火，当年重建。"},{"name": "弘义阁","intro":"弘义阁位于太和殿前广场西侧，面东，与体仁阁相对而立。始建于明永乐十八年（1420年），明初称武楼，嘉靖时称武成阁，清初改称弘义阁。清代为内务府银库，收存金、银、制钱、珠宝、玉器、金银器皿等。皇帝皇后筵宴所用金银器皿由银库预备，用毕仍交该库收存。"},{"name": "熙和门","intro":"熙和门位于外朝中路、太和门外西侧庑房正中。始建于明永乐十八年（1420年），初名右顺门。明嘉靖三十六年（1557年）四月因三大殿火灾被焚毁，次年重建。嘉靖四十一年（1562年）九月改名归极门。万历二十五年（1597年）六月再度烧毁，天启年间重建。顺治二年（1645年）五月改名为雍和门，乾隆元年（1736年）为避雍正皇帝讳而改为熙和门。清乾隆二十三年（1758年）第三次毁于火灾，同年十二月重建。"},{"name": "协和门","intro":"协和门位于紫禁城外朝中路、太和门东侧廊庑正中。始建于明永乐十八年（1420年），初名左顺门。嘉靖三十六年（1557年）四月，三大殿因雷击起火，延及左、右顺门，翌年重建。嘉靖四十一年（1562年）九月改称会极门。万历二十五年（1597年）六月，“三殿又灾”，殃及会极门，至天启年间才重建。清顺治初年重修并改称今名。"}]},{"name": "外朝东路","intro":"","children": [{"name": "文华殿","intro":"文华殿始建于明初，位于外朝协和门以东，与武英殿东西遥对。因其位于紫禁城东部，并曾一度作为“太子视事之所”，“五行说”东方属木，色为绿，表示生长，故太子使用的宫殿屋顶覆绿色琉璃瓦。文华殿初为皇帝常御之便殿，明天顺、成化两朝，太子践祚之前，先摄事于文华殿。"},{"name": "文渊阁","intro":"文渊阁，清宫藏书楼，乾隆四十一年（1776年）建成。乾隆三十八年(1773年)皇帝下诏开设“四库全书馆”，编纂《四库全书》。三十九年下诏兴建藏书楼，命于文华殿后规度适宜方位，创建文渊阁，用于专贮《四库全书》。"},{"name": "内阁大堂","intro":"内阁大堂为清代大学士直舍，亦称大学士堂，位于太和门东庑外东南。大堂南向3间，东西两厢各3间，皆硬山顶，覆黄琉璃瓦。坐东面西者为汉票签房，中1间为侍读拟写草签处，北1间为中书缮写真签处，南1间为收贮本章档案处；坐西面东者为蒙古堂。"},{"name": "内阁大库","intro":"内阁大库是内阁收贮文书、档案的库房，位于紫禁城东南隅、内阁大堂之东。库为砖石结构，墙面辟窗，窗中有铁柱，外有铁板窗。其存放红本、典籍、关防等件之库房，称之为红本库；存放书籍与三节表文、表匣及外藩表文之所称实录库；同时亦存贮满本堂之实录、史书、录疏、起居注及前代帝王功臣之画像等物。今建筑完好。"},{"name": "銮驾库","intro":"銮驾库为清代銮仪卫贮存皇太后仪驾、皇帝法驾卤簿之所。其址在东华门迤南，北设随门房6间，东南临紫禁城墙，西有蜿蜒而过的内金水河，为一独立的院落。院东侧有大库5间，南侧有大库10间，均为黄琉璃瓦硬山式顶，内设上下两层。銮驾库内原有大堂3间、小堂3间及办事房、小库班房、档房等，今已无存。南库前曾出土“古今通集库”碑，为明代遗物，此地当为通集库遗址。"},{"name": "传心殿","intro":"传心殿位于紫禁城东南隅的文华殿东侧，是一组由长方形院落组成的祭祀性建筑。整个院落南北长100m，东西宽25m，占地面积2500㎡。院中“大庖井”极富盛名，井水清甜甘洌，可与京西玉泉山之水相媲美，故有“玉泉第一，大庖第二”之说，井水至今仍未干涸。"},{"name": "南三所","intro":"南三所位于外朝东路文华殿东北，为一组殿宇的总称。明朝这一带有端敬殿、端本宫，为东宫太子所居。其中原有殿名“撷芳殿”，清康熙年间太子允礽之宫人于此居住。乾隆十一年（1746年）在撷芳殿原址兴建三所院落，作为皇子居所。因其位在宁寿宫以南，故又称“南三所”，也称“阿哥所”或“所儿”，嘉庆朝以后多以“撷芳殿”代称整组建筑。"},{"name": "箭亭","intro":"箭亭位于紫禁城东部景运门外、奉先殿南一片开阔的平地上，始建于清雍正八年（1730年），是清代皇帝及其子孙练习骑马射箭的地方。"},{"name": "东华门","intro":"东华门是紫禁城东门，始建于明永乐十八年（1420年）。东华门东向，与西华门遥相对应，门外设有下马碑石，门内金水河南北流向，上架石桥1座，桥北为三座门。"}]},{"name": "外朝西路","intro":"","children": [{"name": "英武殿","intro":"武英殿始建于明初，位于外朝熙和门以西。正殿武英殿南向，面阔5间，进深3间，黄琉璃瓦歇山顶。须弥座围以汉白玉石栏，前出月台，有甬路直通武英门。后殿敬思殿与武英殿形制略似，前后殿间以穿廊相连。东西配殿分别是凝道殿、焕章殿，左右共有廊房63间。院落东北有恒寿斋，西北为浴德堂。"},{"name": "断虹桥","intro":"断虹桥位于太和门外、武英殿之东，单拱石券，横跨于内金水河之上。桥南北向，长18.7m，最宽处达9.20 m。桥面铺砌汉白玉巨石，两侧石栏板雕穿花龙纹图案，望柱上之石狮神态各异，宛然如生。桥之建造年代为明初或元代尚未定论。但此桥用料之考究、装饰之华丽、雕刻之精美乃紫禁城内诸桥之冠。"},{"name": "浴德堂","intro":"浴德堂位于外朝西路武英殿院内西北平台上，其名源自《礼记》中“浴德澡身”之语，是清代词臣校书的值房，专司刊刻、装潢书籍等事宜。"},{"name": "咸安宫","intro":"咸安宫位于西华门内，清内务府在宫内为三旗子弟及景山官学中之优秀者而开设的官学设于此，称咸安宫官学。清雍正七年（1729年）在宫内设官学，原址位于寿康宫后、长庚门内的咸安宫，为明代建筑，天启年间客氏曾居之。清康熙二十一年（1682年）改建。"},{"name": "南薰殿","intro":"南薰殿始建于明代，位于外朝西路，武英殿西南，为一独立的院落。殿面阔5间，黄琉璃瓦单檐歇山顶。"},{"name": "西华门","intro":"西华门是紫禁城西门，始建于明永乐十八年（1420年）。西华门西向，与东华门遥相对应，门外设有下马碑石。"}]},{"name": "内廷中路","intro":"","children": [{"name": "乾清宫","intro":"乾清宫，内廷后三宫之一。始建于明代永乐十八年（1420年），明清两代曾因数次被焚毁而重建，现有建筑为清代嘉庆三年（1798年）所建。"},{"name": "交泰殿","intro":"内廷后三宫之一，位于乾清宫和坤宁宫之间，约为明嘉靖年间建，顺治十二年（1655年）、康熙八年（1669年）重修，嘉庆二年（1797年）乾清宫失火，殃及此殿，是年重建。"},{"name": "坤宁宫","intro":"坤宁宫是内廷后三宫之一，始建于明永乐十八年(1420年)，正德九年(1514年)、万历二十四年(1596年)两次毁于火，万历三十三年(1605年)重建。清沿明制于顺治二年(1645年)重修，十二年(1655年)仿沈阳盛京清宁宫再次重修。嘉庆二年(1797年)乾清宫失火，延烧此殿前檐，三年(1798年)重修。"},{"name": "御花园","intro":"御花园位于紫禁城中轴线上，坤宁宫后方，明代称为“宫后苑”，清代称御花园。始建于明永乐十八年 (1420年)，以后曾有增修，现仍保留初建时的基本格局。"},{"name": "钦安殿","intro":"钦安殿位于御花园正中，南北中轴线上。始建于明代，嘉靖十四年（1535年）添建墙垣后自成格局。清乾隆年间曾在前檐接盖抱厦3间，后拆除。"},{"name": "乾清宫","intro":"乾清门为紫禁城内廷的正宫门。建于明永乐十八年（1420年），清顺治十二年（1655年）重修。"},{"name": "景运门","intro":"景运门，明永乐十八年（1420年）建，万历二十六年（1598年）重修。清沿明制，于顺治十二年（1655年）重修。"},{"name": "隆宗门","intro":"隆宗门，明永乐十八年（1420年）建，万历二十六年（1598年）十一月重修。清沿明制，于顺治十二年（1655年）重修。"},{"name": "昭仁殿","intro":"昭仁殿始建于明代，为乾清宫东侧小殿。昭仁殿南向，单檐歇山顶，上覆黄琉璃瓦。面阔3间，正中明间辟门，两次间槛窗。"},{"name": "弘德殿","intro":"弘德殿为乾清宫之西小殿，始建于明代，初名雍肃殿，明万历十四年（1586年）改今名。"},{"name": "坤宁门","intro":"坤宁门为坤宁宫后台阶下正中面北之门，北通御花园。明初设坤宁门于御花园钦安殿北，即现顺贞门。明嘉靖十四年（1535年），坤宁宫后北围廊正中广运门改建，同时将其改称坤宁门并一直延续至清朝。坤宁门曾于清顺治十二年（1655年）重修。"},{"name": "王翠亭和凝香亭","intro":"玉翠亭、凝香亭原名毓翠亭和金香亭。建于明嘉靖十五年（1536年），万历十九年（1591年）后重建。位于御花园的东北、西北隅。周围修竹作衬和园墙相邻。"},{"name": "天一门","intro":"天一门位于紫禁城内廷中路御花园内，为钦安殿院落之南门，明嘉靖十四年（1535年）添建钦安殿院墙时所建。初名“天一之门”，清代改为“天一门”。"},{"name": "绛雪轩","intro":"绛雪轩位于御花园东南，后依宫墙，座东面西，面阔5间，黄琉璃瓦硬山式顶，前接歇山卷棚顶抱厦3间，平面为“凸”字形。明间开门，次间、梢间为槛窗，上为福寿万字支窗，下为大玻璃方窗。门窗为楠木本色不加油饰，柱、框、梁、枋饰斑竹纹彩画，朴实淡雅。"},{"name": "万春亭和千秋亭","intro":"万春亭、千秋亭分别位于御花园内浮碧亭、澄瑞亭以南，明嘉靖十五年(1536年）建。是一对造型、构造均相同的建筑，仅藻井彩画有细微的差别。"},{"name": "浮碧亭","intro":"浮碧亭位于御花园的东北，亭北正对倚园北墙而建的摛藻堂，正南是万春亭。亭平面方形，三开间，通面阔约8m，前出抱厦，下有东西长的矩形水池，池上横跨单券洞石桥，亭座落于桥上。"},{"name": "御花园东井亭","intro":"御花园东井亭位于天一门外左侧、万春亭前西侧。亭平面方形，面阔1.94m，亭中有井，井口石上覆石盖板，朱红色四柱。"},{"name": "堆秀山","intro":"堆秀山，明曰堆绣山，位于御花园东北部。这里原是明代观花殿的旧址,万历十一年（1583年）改筑堆山。"},{"name": "御景亭","intro":"御景亭位于御花园内东侧的假山顶上。这里原是明代观花殿的旧址。万历间改堆假山。山的东西山石间各有登道，拾级而上可达山顶御景亭。亭子平面方形，四柱，一斗二升交蔴叶斗栱，攒尖顶，上覆翠绿琉璃瓦，黄色琉璃瓦剪边，鎏金宝顶，四面设隔扇门。四周围绕着汉白玉石栏板。亭内天花藻井，面南设宝座。"},{"name": "摛藻堂","intro":"摛藻堂位于御花园内堆秀山东侧，依墙面南，面阔5间，黄琉璃瓦硬山式顶，堂西墙辟有一小门，可通西耳房。堂前出廊，明间开门，次梢间为槛窗。室内放置书架，为宫中藏书之所。乾隆四十四年（1779年）后，《四库全书荟要》曾贮藏于此。"},{"name": "养性斋","intro":"养性斋位于御花园西南，始建于明代，称乐志斋，清代改今名。斋为两层楼阁式，原为7间，座西面东。清乾隆十九年（1754年）于楼两端向前各接出3间，改建为转角楼。"},{"name": "四神祠","intro":"四神祠是供奉四神的地方。建于明嘉靖十五年（1536年）。"},{"name": "澄瑞亭","intro":"澄瑞亭位于御花园的西北，正北为"},{"name": "位育斋","intro":"位育斋位于御花园内西北，明代建，初名对育轩，嘉靖年间曾更名玉芳轩，清代改称今名。"},{"name": "御花园西井亭","intro":"御花园西井亭位于天一门外右侧、千秋亭的东侧。亭平面方形，面阔1.94m，亭中有井，周围有泄水沟槽，朱红色四柱，周围绕以白石雕栏板。"},{"name": "延晖阁","intro":"延晖阁位于御花园内西北，北倚宫墙。明代初建时称清望阁，清代改今名。"},{"name": "顺贞门","intro":"顺贞门位于内廷中路北端，为御花园之北门。始建于明初，原称坤宁门。明嘉靖十四年（1535年）因坤宁门移至坤宁宫后北围廊正中而改称今名。"},{"name": "神武门","intro":"神武门是紫禁城的北门，明永乐十八年（1420年）建成，明称玄武门。清康熙年重修时，因避康熙帝玄烨名讳改称神武门。"}]},{"name": "城池侍卫区","intro":"","children": [{"name": "角楼","intro":"紫禁城垣四隅之上的角楼，建成于明永乐十八年（1420年），清代重修。"    },{"name": "护城河","intro":"环绕紫禁城外围的护城河，建成于明代永乐十八年（1420年）。河宽52m，条石垒砌驳岸，坚固陡直，亦称筒子河。河水自西北流入，向东南流出至御河。清代河中栽莲藕，岁收供宫中使用，余者卖出，得银存奉宸苑备用。"},{"name": "紫禁城的城垣","intro":"紫禁城的城垣建成于明朝永乐十八年（1420年），清代虽有重修，但整体城垣的规模和布局依然保持初建时的原貌。"}]}]
}

D3(V7)树图绘制-数据可视化相关推荐

AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
利用Python实现NBA球员分析绘制数据可视化图表
1.爬虫获取 2.爬虫获取怎么爬 ①获取地址 ②请求网站 requests ③获取数据分析数据 3.绘制一个可视化图表 4.渲染图标 import requests #对目标网址发送请求 from ...
可视化绘制html,Python3.7 通过html绘制数据可视化图表
背景:生成数据分析报告时,需要后期自动生成统计图,插入报告中.但其他几个可视化工具没有合适的图表,查询相关资料后,发现一个网页可以生成所需图表. 目标:内网环境,将生成的html转化成图片,并自动插入 ...
如何绘制数据可视化世界地图
1. 内容概述 Wyn Enterprise系统中的世界地图是通过自定义离线地图的方法来实现的. 自定义离线地图的使用思路是将准备的自定义地图文件上传到系统中,然后切换地图组件的地图数据,即可使用自定 ...
《D3.js数据可视化实战手册》—— 1.1 简介
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第1章,第1.1节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
react 数据可视化_使用d3创建数据可视化并在2020年做出React
react 数据可视化 Data visualisation and application technologies have evolved greatly over the past decad ...
python qt gui与数据可视化编程 kindle_Kindle电子书 – D3.js数据可视化实战手册 azw3...
豆瓣评分:7.0 27人评价简介: 如今这个互联网时代,人们每天都产生海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的 ...
15种独一无二的创新数据可视化方式
全文共5489字,预计学习时长11分钟可视化能解答那些尚未发现的问题. 本·施耐德曼(Ben Shneiderman) 掌握数据可视化技术会打开新世界的大门,带来更多机会.精心设计的可视化能帮助程序 ...
一本 ECharts 数据可视化书籍
对Echarts感兴趣的同学,给大家推荐一本很不错的书籍. PS:文末小z还给大家争取了两本的福利. Apache ECharts (incubating),下文简称ECharts,是由百度捐献给Ap ...

D3(V7)树图绘制-数据可视化

D3(V7)树图绘制-数据可视化相关推荐

最新文章

热门文章