如何使用html，包括css，js 画思维导图？有哪些可用的方法？
首先，创建一个新的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 画思维导图？有哪些可用的方法？
首先，创建一个新的HTML文件，可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>Mind Map</title><link re…...
机器学习---梯度下降代码
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…...
【VB6|第23期】原来Jet.OLEDB也可以读取新版.xlsx的Excel文件
日期：2023年8月11日 作者：Commas 签名：(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方…...
通过控制ros节点的启停，软实现人工控制和紧急停止功能的图示
通过控制ros节点的启停，软实现人工控制和紧急停止功能的图示 实现原理简介： 人工控制的节点： 键盘节点 方向盘节点 自动控制的节点： movebase 导航 autoware 等 底盘节点： 差速底盘 阿克曼底盘 控制节点࿱…...
面试热题（滑动窗口最大值）
给你一个整数数组 nums，有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 输入：nums [1,3,-1,-3,5,3,6,7], k 3 输出：[3,3,5,…...
【代码】表格封装 + 高级查询 + 搜索 +分页器 （极简）
一、标题 查询条件按钮（Header） <!-- Header 标题搜索栏 --> <template><div><div class"header"><div class"h-left"><div class"title"><div class"desc-test">…...
ant.design 组件库中的 Tree 组件实现可搜索的树: React+and+ts
ant.design 组件库中的 Tree 组件实现可搜索的树，在这里我会详细介绍每个方法，以及容易踩坑的点。 效果图： 首先是要导入的文件 // React 自带的属性 import React, { useMemo, useState } from react; // antd 组件库中的，输入…...
Linux系统编程之信号(上)
一、信号概念 信号就是软件中断。每当程序收到一个信号，都需要按指定的方法去处理。以下是UNIX系统的信号表。 其中core表示产生一个复制了该进程内存映像的core文件，它保存了程序现场，可以使用gdb来调试。 二、signal() signal()函数用于改…...
23.Netty源码之内置解码器
highlight: arduino-light Netty内置的解码器 在前两节课我们介绍了 TCP 拆包/粘包的问题，以及如何使用 Netty 实现自定义协议的编解码。可以看到，网络通信的底层实现，Netty 都已经帮我们封装好了，我们只需要扩展 ChannelHandler …...
sigmoid ReLU 等激活函数总结
sigmoid ReLU sigoid和ReLU对比 1.sigmoid有梯度消失问题：当sigmoid的输出非常接近0或者1时，区域的梯度几乎为0，而ReLU在正区间的梯度总为1。如果Sigmoid没有正确初始化，它可能在正区间得到几乎为0的梯度。使模型无法有效训练。 …...
RabbitMQ 消息队列
文章目录 🍰有几个原因可以解释为什么要选择 RabbitMQ：🥩mq之间的对比🌽RabbitMQ vs Apache Kafka🌽RabbitMQ vs ActiveMQ🌽RabbitMQ vs RocketMQ🌽RabbitMQ vs Redis 🥩linux docke…...
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 …...
报错 | Spring报错详解
Spring报错详解 一、前言二、报错提示三、分层解读1.最下面一层Caused by2.上一层Caused by3.最上层Caused by 四、总结五、解决方案 一、前言 本文主要是记录在初次学习Spring时遇到报错后的解读以及解决方案 二、报错提示 三、分层解读 遇到报错的时候，我们需要…...
PHP最简单自定义自己的框架数据库封装调用（五）
1、实现效果调用实现数据增删改查封装 2、index.php 入口定义数据库账号密码 <?php//定义当前请求模块 define("MODULE",index);//定义数据库 define(DB_HOST,localhost);//数据库地址 define(DB_DATABASE,aaa);//数据库 define(DB_USER,root);//数据库账号 def…...
使用Redis来实现点赞功能的基本思路
使用Redis来实现点赞功能是一种高效的选择，因为Redis是一个内存数据库，适用于处理高并发的数据操作。以下是一个基本的点赞功能在Redis中的设计示例： 假设我们有一个文章或帖子，用户可以对其进行点赞，取消点赞&#x…...
【黑马头条之app端文章搜索ES-MongoDB】
本笔记内容为黑马头条项目的app端文章搜索部分 目录 一、今日内容介绍 1、App端搜索-效果图 2、今日内容 二、搭建ElasticSearch环境 1、拉取镜像 2、创建容器 3、配置中文分词器 ik 4、使用postman测试 三、app端文章搜索 1、需求分析 2、思路分析 3、创建索引和…...
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…...
后端开发9.商品类型模块
概述 简介 商品类型我设计的复杂了点，设计了多级类型 效果图 数据库设计...
spring框架自带的http工具RestTemplate用法
1. RestTemplate是什么？ RestTemplate是由Spring框架提供的一个可用于应用中调用rest服务的类它简化了与http服务的通信方式。 RestTemplate是一个执行HTTP请求的同步阻塞式工具类，它仅仅只是在 HTTP 客户端库（例如 JDK HttpURLConnection&a…...
【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…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
Python 实现 Web 静态服务器（HTTP 协议）
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...
在Zenodo下载文件 用到googlecolab googledrive
方法：Figshare/Zenodo上的数据/文件下载不下来？尝试利用Google Colab ：https://zhuanlan.zhihu.com/p/1898503078782674027 参考： 通过Colab&谷歌云下载Figshare数据，超级实用！！࿰…...
6.计算机网络核心知识点精要手册
计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法：数据与控制信息的结构或格式，如同语言中的语法规则语义：控制信息的具体含义和响应方式，规定通信双方"说什么"同步：事件执行的顺序与时序…...