当前位置： 首页 > news >正文

如何使用html，包括css，js 画思维导图？有哪些可用的方法？

news 2026/2/11 3:41:41

首先，创建一个新的HTML文件，可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Mind Map</title><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><div id="mindMap"></div><script src="script.js"></script>
</body>
</html>

在同一目录下创建一个名为 styles.css 的CSS文件，用于定义思维导图的样式。你可以根据自己的需求进行自定义样式。

#mindMap {width: 800px;height: 600px;border: 1px solid #ccc;
}

如果想为思维导图添加更多的样式，可以在 styles.css 文件中进行定义。你可以根据需要自定义样式，比如节点的颜色、字体大小等。

  .node {background-color: #f2f2f2;border: 1px solid #ccc;padding: 10px;font-size: 16px;text-align: center;}.node-container {display:inline-block;margin-top: 20px;margin-left: 50px;}.line {width: 0;border-left: 1px solid #ccc;position: absolute;top: 50%;left: 0;height: 100%;}

在同一目录下创建一个名为 script.js 的JavaScript文件，用于实现思维导图的绘制逻辑。

document.addEventListener("DOMContentLoaded", function() {// 获取要插入思维导图的元素var mindMapContainer = document.getElementById("mindMap");// 创建思维导图的数据结构var mindMapData = {id: 1,topic: "Main Topic",children: [{id: 2,topic: "Subtopic 1",children: [{id: 4,topic: "Subtopic 1.1",children: []},{id: 5,topic: "Subtopic 1.2",children: []}]},{id: 3,topic: "Subtopic 2",children: []}]};// 调用绘制思维导图的函数drawMindMap(mindMapContainer, mindMapData);
});function drawMindMap(container, data) {// 创建主题元素var topicElement = document.createElement("div");topicElement.classList.add("node");topicElement.textContent = data.topic;// 添加主题元素到容器中container.appendChild(topicElement);// 递归处理子主题data.children.forEach(function(childData) {var childContainer = document.createElement("div");childContainer.classList.add("node-container");container.appendChild(childContainer);// 创建连线元素var lineElement = document.createElement("div");lineElement.classList.add("line");container.appendChild(lineElement);// 递归绘制子主题drawMindMap(childContainer, childData);});
}

将HTML文件、CSS文件和JavaScript文件放在同一目录下，然后在浏览器中打开HTML文件，即可看到绘制出的思维导图。

上面的代码只是一个非常简单的示例，最终效果并不美观，只是用于演示思维导图的绘制过程。你可以根据自己的需求和设计风格进行修改和扩展，使其符合你的实际应用场景。

相关文章：

如何使用html，包括css，js 画思维导图？有哪些可用的方法？

首先&#xff0c;创建一个新的HTML文件&#xff0c;可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>Mind Map</title><link re…...

编程日记 2023/8/11 19:08:03

机器学习---梯度下降代码

1. 归一化 # Read data from csv pga pd.read_csv("pga.csv") print(type(pga))print(pga.head())# Normalize the data 归一化值 (x - mean) / (std) pga.distance (pga.distance - pga.distance.mean()) / pga.distance.std() pga.accuracy (pga.accuracy - pg…...

编程日记 2023/8/11 19:07:02

【VB6|第23期】原来Jet.OLEDB也可以读取新版.xlsx的Excel文件

日期&#xff1a;2023年8月11日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…...

编程日记 2023/8/11 19:06:00

通过控制ros节点的启停，软实现人工控制和紧急停止功能的图示

通过控制ros节点的启停&#xff0c;软实现人工控制和紧急停止功能的图示 实现原理简介&#xff1a; 人工控制的节点&#xff1a; 键盘节点 方向盘节点 自动控制的节点&#xff1a; movebase 导航 autoware 等 底盘节点&#xff1a; 差速底盘 阿克曼底盘 控制节点&#xff1…...

编程日记 2023/8/11 19:04:59

面试热题（滑动窗口最大值）

给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7], k 3 输出&#xff1a;[3,3,5,…...

编程日记 2023/8/11 19:03:58

【代码】表格封装 + 高级查询 + 搜索 +分页器 （极简）

一、标题 查询条件按钮&#xff08;Header&#xff09; <!-- Header 标题搜索栏 --> <template><div><div class"header"><div class"h-left"><div class"title"><div class"desc-test">…...

编程日记 2023/8/11 19:02:58

ant.design 组件库中的 Tree 组件实现可搜索的树: React+and+ts

ant.design 组件库中的 Tree 组件实现可搜索的树&#xff0c;在这里我会详细介绍每个方法&#xff0c;以及容易踩坑的点。 效果图&#xff1a; 首先是要导入的文件 // React 自带的属性 import React, { useMemo, useState } from react; // antd 组件库中的&#xff0c;输入…...

编程日记 2023/8/11 19:01:56

Linux系统编程之信号(上)

一、信号概念 信号就是软件中断。每当程序收到一个信号&#xff0c;都需要按指定的方法去处理。以下是UNIX系统的信号表。 其中core表示产生一个复制了该进程内存映像的core文件&#xff0c;它保存了程序现场&#xff0c;可以使用gdb来调试。 二、signal() signal()函数用于改…...

编程日记 2023/8/11 19:00:55

23.Netty源码之内置解码器

highlight: arduino-light Netty内置的解码器 在前两节课我们介绍了 TCP 拆包/粘包的问题&#xff0c;以及如何使用 Netty 实现自定义协议的编解码。可以看到&#xff0c;网络通信的底层实现&#xff0c;Netty 都已经帮我们封装好了&#xff0c;我们只需要扩展 ChannelHandler …...

编程日记 2023/8/11 18:59:53

sigmoid ReLU 等激活函数总结

sigmoid ReLU sigoid和ReLU对比 1.sigmoid有梯度消失问题&#xff1a;当sigmoid的输出非常接近0或者1时&#xff0c;区域的梯度几乎为0&#xff0c;而ReLU在正区间的梯度总为1。如果Sigmoid没有正确初始化&#xff0c;它可能在正区间得到几乎为0的梯度。使模型无法有效训练。 …...

编程日记 2023/8/11 18:58:51

RabbitMQ 消息队列

文章目录 &#x1f370;有几个原因可以解释为什么要选择 RabbitMQ&#xff1a;&#x1f969;mq之间的对比&#x1f33d;RabbitMQ vs Apache Kafka&#x1f33d;RabbitMQ vs ActiveMQ&#x1f33d;RabbitMQ vs RocketMQ&#x1f33d;RabbitMQ vs Redis &#x1f969;linux docke…...

编程日记 2023/8/11 18:57:49

PHP实现在线进制转换器，10进制，2、4、8、16、32进制转换

1.接口文档 2.laravel实现代码 /*** 进制转换计算器* return \Illuminate\Http\JsonResponse*/public function binaryConvertCal(){$ten $this->request(ten);$two $this->request(two);$four $this->request(four);$eight $this->request(eight);$sixteen …...

编程日记 2023/8/11 18:56:48

报错 | Spring报错详解

Spring报错详解 一、前言二、报错提示三、分层解读1.最下面一层Caused by2.上一层Caused by3.最上层Caused by 四、总结五、解决方案 一、前言 本文主要是记录在初次学习Spring时遇到报错后的解读以及解决方案 二、报错提示 三、分层解读 遇到报错的时候&#xff0c;我们需要…...

编程日记 2023/8/11 18:55:47

PHP最简单自定义自己的框架数据库封装调用（五）

1、实现效果调用实现数据增删改查封装 2、index.php 入口定义数据库账号密码 <?php//定义当前请求模块 define("MODULE",index);//定义数据库 define(DB_HOST,localhost);//数据库地址 define(DB_DATABASE,aaa);//数据库 define(DB_USER,root);//数据库账号 def…...

编程日记 2023/8/11 18:54:46

使用Redis来实现点赞功能的基本思路

使用Redis来实现点赞功能是一种高效的选择&#xff0c;因为Redis是一个内存数据库&#xff0c;适用于处理高并发的数据操作。以下是一个基本的点赞功能在Redis中的设计示例&#xff1a; 假设我们有一个文章或帖子&#xff0c;用户可以对其进行点赞&#xff0c;取消点赞&#x…...

编程日记 2023/8/11 18:53:45

【黑马头条之app端文章搜索ES-MongoDB】

本笔记内容为黑马头条项目的app端文章搜索部分 目录 一、今日内容介绍 1、App端搜索-效果图 2、今日内容 二、搭建ElasticSearch环境 1、拉取镜像 2、创建容器 3、配置中文分词器 ik 4、使用postman测试 三、app端文章搜索 1、需求分析 2、思路分析 3、创建索引和…...

编程日记 2023/8/11 18:52:43

Nginx安装以及LVS-DR集群搭建

Nginx安装 1.环境准备 yum insatall -y make gcc gcc-c pcre-devel #pcre-devel -- pcre库 #安装openssl-devel yum install -y openssl-devel 2.tar安装包 3.解压软件包并创建软连接 tar -xf nginx-1.22.0.tar.gz -C /usr/local/ ln -s /usr/local/nginx-1.22.0/ /usr/local…...

编程日记 2023/8/11 18:51:42

后端开发9.商品类型模块

概述 简介 商品类型我设计的复杂了点，设计了多级类型 效果图 数据库设计...

编程日记 2023/8/11 18:50:41

spring框架自带的http工具RestTemplate用法

1. RestTemplate是什么&#xff1f; RestTemplate是由Spring框架提供的一个可用于应用中调用rest服务的类它简化了与http服务的通信方式。 RestTemplate是一个执行HTTP请求的同步阻塞式工具类&#xff0c;它仅仅只是在 HTTP 客户端库&#xff08;例如 JDK HttpURLConnection&a…...

编程日记 2023/8/11 18:49:39

【flink】Checkpoint expired before completing.

使用flink同步数据出现错误Checkpoint expired before completing. 11:32:34,455 WARN org.apache.flink.runtime.checkpoint.CheckpointFailureManager [Checkpoint Timer] - Failed to trigger or complete checkpoint 4 for job 1b1d41031ea45d15bdb3324004c2d749. (2 con…...

编程日记 2023/8/11 18:48:37

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25