vue+D3 层次树图绘制

最新推荐文章于 2024-07-29 17:44:54 发布
最新推荐文章于 2024-07-29 17:44:54 发布
阅读量545 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoKiDoK/article/details/130711624
版权 

<template>
    <div id="log"></div>
      <div id="bar-chart-container"></div>
    </template>
  <style>
#g{
            background: url("F:\vite-vue\public\背景.jpg");
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
            color: black;
            width: 100%;
            background-size: cover;
            position: fixed;
            opacity: 0.7;
         }
#bar-chart-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("F:\vite-vue\public\背景.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1; /* 将背景图放在最底层 */
    opacity: 0.5;
}
 .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>
    <script>
    import { defineComponent } from 'vue';

    import axios from "axios";
    import * as d3 from "d3";
       
    var color = d3.schemeCategory10;
    export default defineComponent({
      mounted() {      
        axios.get("caixi.json").then((res) => {
                console.log(res.data);
                this.drawGraphChart(res.data);
            });    
      },
      methods:{
        drawGraphChart(data){
            var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth);
		    var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight);
          width=width*0.8;
          height=height*0.9;
            var color = d3.schemeCategory10;
            var svg = d3.select("body")			//选择<body>
					.append("svg")			//在<body>中添加<svg>
					.attr("width", width)	//设定<svg>的宽度属性
					.attr("height", height);//设定<svg>的高度属性
                    
                    
           var radius = width /2;
            var tree=d3.cluster()
                       .size([2*Math.PI,radius-300]);
            d3.json("caixi.json").then(function(data) {
               console.log(data);
               var hi=d3.hierarchy(data);
               console.log(hi);
               var root=tree(hi);
              var links=root.links();
               console.log(links);
              var nodes=root.descendants();
               console.log(nodes);
               svg.append("g")
                      .attr("fill", "none")
                      .attr("stroke", "#555")
                      .attr("stroke-width", 1)
                    .selectAll("path")
                    .data(links)
                    .join("path")
                    .attr("d", d3.linkRadial()
                      .angle(d => d.x)
                      .radius(d => d.y));

                svg.append("g")
                   .selectAll("circle")
                   .data(nodes)
                   .join("circle")
                   .attr("transform", d => `
                    rotate(${d.x * 180 / Math.PI - 90})
                    translate(${d.y},0)
                  `)
                  .attr("fill",d=>color[d.depth])
                  .attr("r", d=>(d.height*3+3))
                  .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")
                        })
                  ;

                  svg.append("g")
				  	    .attr("font-family", "sans-serif")
					    .attr("font-size", 10)
					    .attr("stroke-width", 0)
                     .selectAll("text")
                     .data(root.descendants())
                     .join("text")
                     .attr("transform", d => `
						rotate(${d.x * 180 / Math.PI - 90})
						translate(${d.y},0)
						rotate(${d.x >= Math.PI ? 180 : 0})
					  `)
                     .attr("dy", "0.31em")
                     .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
                     .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
                     .text(d => d.data.name)
                     .clone(true).lower()
                     .attr("fill", d=>color[d.depth]);

                  svg.selectAll("g")
                   .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
                   var title = svg.append("text")
                        .text("中   国   菜    系")
                        .attr("x", 30)
                        .attr("y", 50)
                        .attr("font-size", "58")
                        .attr("fill", "black")
                        .style("writing-mode", "vertical-lr");
                    var shum = svg.append("text")
                        .text("20数科")
                        .attr("x", 65)
                        .attr("y", 330)
                        .attr("font-size", "12")
                        .attr("fill", "black")
                        .style("writing-mode", "vertical-lr");
            
            })
          }
      }
    })
    </script>

 

 

<template>
    <div id="log"></div>
      <div id="bar-chart-container"></div>
    </template>
  <style>
#g{
            background: url("F:\vite-vue\public\背景.jpg");
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
            color: black;
            width: 100%;
            background-size: cover;
            position: fixed;
            opacity: 0.7;
         }
#bar-chart-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("F:\vite-vue\public\背景.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1; /* 将背景图放在最底层 */
    opacity: 0.5;
}
 .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>
    <script>
    import { defineComponent } from 'vue';

    import axios from "axios";
    import * as d3 from "d3";
       
    var color = d3.schemeCategory10;
    export default defineComponent({
      mounted() {      
        axios.get("caixi.json").then((res) => {
                console.log(res.data);
                this.drawGraphChart(res.data);
            });    
      },
      methods:{
        drawGraphChart(data){
            var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth);
		    var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight);
          width=width*0.8;
          height=height*0.9;
            var color = d3.schemeCategory10;
            var svg = d3.select("body")			//选择<body>
					.append("svg")			//在<body>中添加<svg>
					.attr("width", width)	//设定<svg>的宽度属性
					.attr("height", height);//设定<svg>的高度属性
                    
                    
           var radius = width /2;
            var tree=d3.cluster()
                       .size([height,width*0.8]);
            d3.json("caixi.json").then(function(data) {
               console.log(data);
               var hi=d3.hierarchy(data);
               console.log(hi);
               var root=tree(hi);
              var links=root.links();
               console.log(links);
              var 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.linkHorizontal()         //d3.linkHorizontal()
                                    .x(d=>d.y+90)
                                    .y(d=>d.x+10)
                        );
            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.y+110)
                        .attr("cy",d=>d.x+10)
                        .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.y+110)
                        .attr("y",d=>d.x+20)
                        .attr("font-size","12")
                        .attr("fill","black")
                        .attr("transform",d=>`rotate(0,${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","48")
                        .attr("fill","black")
            })
          }
      }
    })
    </script>

 

<template>
    <div id="log"></div>
      <div id="bar-chart-container"></div>
    </template>
  <style>
#g{
            background: url("F:\vite-vue\public\背景.jpg");
            background-repeat: no-repeat;
            background-position: center;
            height: 100%;
            color: black;
            width: 100%;
            background-size: cover;
            position: fixed;
            opacity: 0.7;
         }
#bar-chart-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("F:\vite-vue\public\背景.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1; /* 将背景图放在最底层 */
    opacity: 0.5;
}
 .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>
    <script>
    import { defineComponent } from 'vue';

    import axios from "axios";
    import * as d3 from "d3";
       
    var color = d3.schemeCategory10;
    export default defineComponent({
      mounted() {      
        axios.get("caixi.json").then((res) => {
                console.log(res.data);
                this.drawGraphChart(res.data);
            });    
      },
      methods:{
        drawGraphChart(data){
            var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth);
		    var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight);
          width=width*0.8;
          height=height*0.9;
            var color = d3.schemeCategory10;
            var svg = d3.select("body")			//选择<body>
					.append("svg")			//在<body>中添加<svg>
					.attr("width", width)	//设定<svg>的宽度属性
					.attr("height", height);//设定<svg>的高度属性
                    
                    
           var radius = width /2;
            var tree=d3.cluster()
                       .size([width,height*0.7]);
            d3.json("caixi.json").then(function(data) {
               console.log(data);
               var hi=d3.hierarchy(data);
               console.log(hi);
               var root=tree(hi);
              var links=root.links();
               console.log(links);
              var 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","black")
                        .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","48")
                        .attr("fill","black")
            })
          }
      }
    })
    </script>

无bug代码搬运工
关注
vue+d3实现横向树状图（节点使用矩形图展示信息）
qq_42241946的博客
05-10 3895
项目步骤如下标注： <template> <div class="history" ref="history" style="height: 99%"> <history-view-title :title="history_view_title"></history-view-title> <main class="container"> <div id="myInput"> &l.
探索Vue.D3.tree：构建动态数据可视化的新工具
gitblog_00036的博客
04-11 409
探索Vue.D3.tree：构建动态数据可视化的新工具 Vue.D3.treeVue component to display tree based on D3.js layout.项目地址:https://gitcode.com/gh_mirrors/vu/Vue.D3.tree 是一个强大的开源项目，它将流行的前端框架Vue.js与数据可视化库D3.js结合，提供了创建交互式树状图的强大功能...
在vue中使用d3做一个动态加载的树形图
hello world
08-12 2323
树形图数据量可能会很大，一次性全部加载可能会有延迟，所以一开始只加载一层节点的数据，当我们点击节点去展开的子节点的时候，再通过请求去加载子节点的数据，并更新到树上 本demo中还添加了放大缩小、点击节点居中的功能，参考链接http://www.jq22.com/yanshi21370 注意：本demo用的d3版本是v3，用最新版有些功能无法使用 <script src="https://d3js.org/d3.v3.min.js"></script> 效果图
自研Vue3开源Tree组件：节点拖拽bug修复
felix_alone2012的博客
07-29 239
bug原因：插入扁平化列表的位置判断错误~
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
Vue.D3.tree D3.jsVue.D3.tree-基于D3.js的树视图-Vue.js开发
05-27
Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件：{树}，data（）{返回{树：{名称：“父亲”，子代：[{名称：“ son1”，子代：[{名称：“孙子“}，{name：” grandson2“}]}，{nam
vue d3 svg tree树状图
czy279470138的博客
03-22 4190
用的是d3.v3 版本 展示没有问题，细节有问题。 采用的是自己的json，调接口的没有总结，太麻烦了。 下面地址是原声的，支持提示框可复制文字，并且节点之间不会重叠，tree.size 改成 tree.nodeSize 即可 https://blog.csdn.net/czy279470138/article/details/88419831 <style> ...
vue-d3-demo:使用Vue.js + D3.js绘制图形的演示
05-17
d3-demo 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production...
Neo4j+springboot+vue+d3.js知识图谱构建和可视化
01-17
在知识图谱项目中，d3.js可以用于绘制节点和边，实现动态布局，以及添加交互功能，如节点的点击、拖拽、缩放等。 **5. 知识图谱构建流程** - **数据获取与预处理**：首先，从各种来源收集数据，如文本、数据库或API...
vue-d3-graph:vue+d3v6实现动态知识图谱可视化展示（包含2D和3D图谱展示）
07-09
博客地址：...由于发现在我的博客通过点击GitHub链接，会跳转到别人盗用的下载地址，而且还是VIP收费，所以自己把代码上传CSDN资源上。 【因为缺分，所以收5个积分，免费可以到Github上下载最新的代码】
vue+天地图+d3.js绘制行政区划
最新发布
08-19
需要在vue项目的index.html中引入的d3.js文件资源引入来实现绘制行政区划功能
vued3一个D3的Vuejs插件
08-10
vue-d3：一个D3的Vue.js插件
vue+d3实现的拓扑图，可拖拽
09-19
在这个项目中，“vue+d3实现的拓扑图，可拖拽”意味着结合了Vue.js的组件化和D3.js的数据绑定能力，创建了一个可以互动的拓扑图，用户可以自由地拖动节点。 首先，让我们详细了解一下Vue.js。Vue.js的核心特性包括...
vue + d3.js(v6) 绘制【树状图/思维导图】
朝阳39的博客
01-22 2165
<template> <div class="d3Chart"></div> </template> <script> import * as d3 from 'd3'; export default { mounted() { // 源数据 let data = { "name": "中国", ...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
cuk5239的博客
07-25 1259
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based on D3.js layout. 更新documentationVue组件以显示基于D3.js布局的图形。 树 (Tree) 用法 (Usage) <tree :data="tre...
vue 做一个树图
学习使我快乐_玉祥
09-12 2014
{"path":"/快速访问","name":"快速访问",},]通过child无线嵌套。
D3实现树状图(vue+v5)
The One Who's at the Front
10-24 4580
树状图 树状图用于表示层级、上下级、包含与被包含关系 新知识 d3.hierarchy() 层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据。 d3.hierarchy().sum() 后序遍历，官方API的解释如下： d3.tree() 创建一个树状图生成器 d3.tree().size() 定义树的大小 d3.tree().separation(...
D3.js的V5版本-Vue框架中使用-树状图
hsany330的专栏
06-09 1172
一. api简介 d3.tree()，创建一个树状图生成器 d3.tree().size()，定义树的大小 d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点，已经经过转换的数据 node.links()，得到所有的边，已经经过转换的数据 二.Vue中使用 *点击节点可展开收缩 <template lang='pug'> div.tree-contain...
vue树状显示图
xfd19971030的博客
04-14 2232
转载自：https://www.cnblogs.com/steamed-twisted-roll/p/10731862.html 子组件treeData.vue <template> <table v-if="treeData && treeData.partnerName"> <tr> <td :colspan="treeData.childers ? treeData.childers.length * 2 : 1" :
vue +d3绘制流程图
09-18
结合Vue.js和D3.js可以很方便地绘制流程图。 首先，我们需要在Vue.js项目中安装D3.js，可以通过npm安装。在终端中运行以下命令： npm install d3 安装完成后，在Vue.js组件中引入D3.js库： import * as d3 from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值