PowerBI利用市场可视化组件Hierarchy Chart by Akvelon绘制组织架构图

背景来源

Power BI在市场中为用户提供了多元化的可视化组件,以使报表呈现更加丰富美观。用户也可以自己在开发平台上开发符合业务需求的新组件,今年2月Power BI更新的内容里,添加了一款可以绘制组织架构图的组件Hierarchy Chart by Akvelon(本地Desktop端需要登录账号,才能访问市场)。
个人使用下来后,有两点感触:

  • 不知道数据应该是什么样子;
  • 不知道具体字段应该放在哪个位置;
  • 一旦摸索成功,整体效果很清楚明了。

直接贴最终效果图:有需要的可以私信自取:
在这里插入图片描述

补充

前段时间由于种种原因,未更新文章,这篇文章本想对这个结构的使用说明做一个详细介绍的,放在草稿箱很久了都没有编辑,现在索性把最终结果贴出来,有兴趣的同学可以在下方评论留下地址,我私发文件给你们慢慢研究哦。

在JavaScript中,绘制三国演义的树状图通常会使用数据驱动的图表库,如D3.js(Data-Driven Documents)。D3.js提供了一套强大的API,可以用来创建各种复杂的可视化效果。 首先,你需要准备一个包含三国人物及其相互关系的数据结构,例如JSON格式,类似于: ```json { "name": "曹操", "children": [ {"name": "曹丕", "children": []}, {"name": "曹植", "children": []} ] } ``` 然后,你可以使用以下步骤构建树状图: 1. **导入库**:引入D3.js和其他依赖库,如果需要的话。 ```javascript import * as d3 from 'd3'; ``` 2. **选择DOM元素**:找到用于展示图表的HTML元素。 ```javascript const svg = d3.select('svg'); ``` 3. **设置视口和比例尺**: ```javascript const width = +svg.attr('width'), height = +svg.attr('height'); const treeLayout = d3.tree() .size([height, width]); const root = d3.hierarchy(三国演义TreeData); ``` 4. **转换数据**:将数据结构转换为适合布局的格式。 ```javascript root.x0 = -180; root.y0 = 0; // 运行布局算法 treeLayout(root); function collapse(d) { if (d.children) { d._children = d.children; d.children = null; } } // 展开或收缩节点 function toggleNode(d) { if (d.children) { collapse(d); } else { expand(d); } } // 启动动画 function expand(d) { d.x0 = ++d._x0; update(); } function update() { const nodes = [...root.descendants(), root], links = root.links(); // 计算节点和链接的新位置 nodes.forEach(collapse); let y = 60, nodeHeight = 20; // 创建SVG元素 enter.append('g') .attr('transform', `translate(${y}, 0)`); // 更新节点 enter.selectAll('circle') .data(nodes) .enter().append('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', 5) .style('fill', color); // 更新链接 enter.selectAll('line') .data(links) .enter().insert('line', '__parent__') .attr('x1', source => source.x) .attr('y1', source => source.y) .attr('x2', target => target.x) .attr('y2', target => target.y); // 移除不再存在的节点和链接 exit.selectAll('*').remove(); // 动画过渡 transition.selectAll('circle') .attr('cy', d => d.y); transition.selectAll('line') .attr('x1', source => source.x) .attr('y1', source => source.y) .attr('x2', target => target.x) .attr('y2', target => target.y); requestAnimationFrame(update); } d3.select(self.frameElement).style("height", `${height}px`); ``` 最后,在`update()`函数中,我们处理了节点进入、更新和退出的不同阶段,通过D3的动画功能让整个过程平滑流畅。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值