vue + d3.js(v6) 绘制【树状图/思维导图】

<template><div class="d3Chart"></div>
</template>
<script>import * as d3 from 'd3';export default {mounted() {// 源数据let data = {"name": "中国","children":[{"name": "浙江","children":[{"name": "杭州"},{"name": "宁波"},{"name": "温州"},{"name": "绍兴"}]},{"name": "广西","children":[{"name": "桂林","children":[{"name": "秀峰区"},{"name": "叠彩区"},{"name": "象山区"},{"name": "七星区"}]},{"name": "南宁"},{"name": "柳州"},{"name": "防城港"}]},{"name": "黑龙江","children":[{"name": "哈尔滨"},{"name": "齐齐哈尔"},{"name": "牡丹江"},{"name": "大庆"}]},{"name": "新疆","children":[{"name": "乌鲁木齐"},{"name": "克拉玛依"},{"name": "吐鲁番"},{"name": "哈密"}]}]}// 画布的参数let mapWidth = 600;let mapHeight = 600;let mapPadding = 20// 定义画布—— 外边距 10pxlet svgMap = d3.select(".d3Chart").append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "10px")// 定义树状图画布let treeMap = svgMap.append("g").attr("transform", "translate(" + mapPadding + "," + mapPadding + ")");// 将源数据转换为可以生成树状图的数据(有节点 nodes 和连线 links )let treeData = d3.tree()// 设置树状图的尺寸.size([mapWidth - 3 * mapPadding, mapHeight - 6 * mapPadding])// 设置树状图节点之间的间隔.separation(function (a, b) {return (a.parent == b.parent ? 1 : 2) / a.depth;})(// 创建层级布局，对源数据进行数据转换d3.hierarchy(data).sum(function (d) {return d.value;}))// 贝塞尔曲线生成器let Bézier_curve_generator = d3.linkHorizontal().x(function (d) {return d.y;}).y(function (d) {return d.x;});//绘制边treeMap.selectAll("path")// 节点的关系 links.data(treeData.links()).enter().append("path").attr("d", function (d) {// 根据name值的长度调整连线的起点var start = {x: d.source.x, y: d.source.y + d.source.data.name.length * 16 + 12};var end = {x: d.target.x, y: d.target.y};return Bézier_curve_generator({source: start, target: end});}).attr("fill", "none").attr("stroke", "blue").attr("stroke-width", 1);// 创建分组——节点+文字let groups = treeMap.selectAll("g")// 节点 nodes.data(treeData.descendants()).enter().append("g").attr("transform", function (d) {var cx = d.x;var cy = d.y;return "translate(" + cy + "," + cx + ")";});//绘制节点groups.append("circle").attr("r", 2).attr("fill", "white").attr("stroke", "red").attr("stroke-width", 1);//绘制文字groups.append("text").attr("x", function (d) {return 8}).attr("y", -5).attr("dy", 10).text(function (d) {return d.data.name;})}}
</script>
<style scoped>
</style>

vue + d3.js(v6) 绘制【树状图/思维导图】相关推荐

项目管理树状组织结构思维导图怎样绘制
思维导图的种类是很多的,不同的主题要选择不同的框架结构以及绘制方法,这样有利于洪作的进行,并且熟练掌握不同结构思维导图的绘制可以对让我们在学到不同的知识点,下面是分享的项目管理树状组织结构思维导图的绘 ...
【进阶技巧】如何绘制高颜值XMind思维导图？色彩使用很重要！
思维导图软件推荐: MindManager Edraw MindMaster TheBrain 思维导图是思维可视化的利器,我们用它来辅助思考,同时也用它来展示思维.当一张思维导图被分享时,它的可读性 ...
数据结构-树与二叉树-思维导图+小结
数据结构-树与二叉树-思维导图 1 数据结构-第五章-树与二叉树-思维导图 2 思维导图-补充 3 小结 3.1 知识点小结 3.2 习题小结 1 数据结构-第五章-树与二叉树-思维导图数据结构 ...
思维导图怎么画：多方法绘制自己喜欢的思维导图技巧
我们在上班或整理思路的时候,可能会绘制思维导图以便更好地了解整个流程的走向.但是在绘制流程图的时候,很多用户都不知道应该如何绘制才好.那么,接下来就要为大家讲讲怎么通过多个方法来绘制思维导图. 一.直 ...
学习使用XMind——绘制计算机网络概述的思维导图
@学习使用XMind--绘制计算机网络概述的思维导图学习使用XMind--绘制计算机网络概述的思维导图举例 XMind介绍思维导图是一种表达放射性思维的图形工具.很多时候在我们处理某件事情.某项工 ...
心智图/思维导图（Mind Map/Mind Mapping），思维导图介绍
心智图(Mind Map),又称脑图.心智地图.脑力激荡图.思维导图.灵感触发图.概念地图.树状图.树枝图或思维地图,是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具. 心智图是使 ...
【富文本】亿图思维导图MindMaster Pro限时赠送正版
已停止赠送,如有需要请查看:亿图思维导图软件 Edraw MindMaster Pro 8.0.102 中文直装版全功能专业版
在线绘制流程图网站、思维导图网站总结
本篇博客总结了在线绘制流程图.思维导图的几个网站,欢迎留言补充 1.processsOn 免费在线作图.实时协作支持流程图.思维导图.原型图.UML.网络拓扑图.组织结构图等 2.爱莫流程图爱莫流 ...
用matlab画脑图,思维导图怎么画，画出一副好看的流程图方法是什么
作为职场上的一员,平时免不了画各种思维导图,刚开始的时候,总是感觉很难绘制,每次打开工具就在哪里傻傻的坐着,不知道该从哪里开始绘制,之后我发现了一款绘制思维导图的工具,本质上提高了我们的效率,帮助我们 ...
在线脑图(思维导图)服务网站
http://www.web20share.com/list/mindmap 先简单介绍一下脑图的概念吧,在英文中称作(Mind Mapping),翻译有好几中叫法,心智图,又称脑图.思维导图.灵感触 ...

vue + d3.js(v6) 绘制【树状图/思维导图】

vue + d3.js(v6) 绘制【树状图/思维导图】相关推荐

最新文章

热门文章