svg 树状图_树状图一定要像树?试试更美的形态!

fb416ee9f1db579ea4a8d151eea97ea5.png

隔了一周,课代表又来上课啦~

今天向大家介绍一种图表,族谱图。哦不,是树状图。 

61a261f95d97ed968f27b73fb3c10504.png

树状图一般由几个大枝干,再细分为小枝干,一层一层分级。

同学们看书会制作的思维导图也是一种树状图。

比如前段时间我们把民法典的构成做成了一张思维导图,但本质它也是个树状图。

ffd8905c06f9a6bb292bf1b251281095.png

上面的这种 S 型树状图,可以把要展示的信息清晰呈现,视觉阅读上也比较流畅。

ac223f73d57edffe3f1f1a411da0ad31.png还有一种是环形树状图,这种树状图的好处是把内容更集中展现,展现更多的是占比情况,不必纠结每一条信息文字的呈现。

对于数据量相对较多但无需展现密集信息的,环形树状图比 S 型 树状图更合适也更节省制图的空间。

 230bb723c097220aecc93c9a16fafbca.png今天课代表推荐一个可以制作 树状图 的在线无代码免费工具 —— RawGraphs?

686566ef8edd9ba2521e77f12ee3263a.png ( https://rawgraphs.io/ ) <
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的例子,可以通过 SVG 绘制一个基本的形图。 ```html <svg width="400" height="400"> <g> <rect x="20" y="20" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" /> <text x="70" y="45" font-size="14" font-weight="bold" text-anchor="middle">Root</text> <rect x="120" y="100" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" /> <text x="170" y="125" font-size="14" font-weight="bold" text-anchor="middle">Node 1</text> <line x1="70" y1="45" x2="170" y2="100" stroke="gray" stroke-width="1" /> <rect x="220" y="175" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" /> <text x="270" y="200" font-size="14" font-weight="bold" text-anchor="middle">Node 2</text> <line x1="170" y1="125" x2="270" y2="175" stroke="gray" stroke-width="1" /> <rect x="120" y="250" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" /> <text x="170" y="275" font-size="14" font-weight="bold" text-anchor="middle">Node 3</text> <line x1="170" y1="125" x2="170" y2="250" stroke="gray" stroke-width="1" /> <line x1="170" y1="250" x2="270" y2="175" stroke="gray" stroke-width="1" /> </g> </svg> ``` 在这个例子中,我们使用了 SVG 的基本形状元素,如 `rect` 和 `line`,以及文本元素 `text`,来绘制一个简单的形图。我们通过设置元素的属性来调整它们的位置,大小和样式。 这只是一个简单的例子,你可以根据你的需求和创意来设计和绘制复杂的形图。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值