d3js v7版本超简洁树形结构图实现

最新推荐文章于 2024-10-22 13:41:12 发布

原创

最新推荐文章于 2024-10-22 13:41:12 发布 · 1.5k 阅读

标签

#js #前端 #html

收录于

该博客介绍了如何利用d3.js库的v7版本创建一个简单的树形结构图。代码示例展示了如何定义数据、设置绘图范围、添加箭头以及绘制节点和链接的方法，便于读者理解并进行自定义修改。

d3js v7版本超简洁树形结构图实现
可根据此简单图进行定制化结构图修改
有具体注释
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <title>v7版本d3 树形结构图</title>
  </head>
  <body>
    <div>树形结构图</div>
    <div id="tree"></div>
  </body>
  <script>
    //   准备数据，要是树型结构
    var root = {
   
   
      name: "地区1",
      children: [
        {
   
   
          name: "地区2",
          children: [
            {
   
   
              name: "地区3",
            },
          ],
        },
        {
   
   
          name: "地区2",
          children: [
            {
   
   
              name: "地区3",
            },
          ],
        },
        {
   
   
          name: "地区2",
          children