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

如何使用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 画思维导图?有哪些可用的方法?

首先&#xff0c;创建一个新的HTML文件&#xff0c;可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。 <!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文件

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

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

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

面试热题(滑动窗口最大值)

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

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

一、标题 查询条件按钮&#xff08;Header&#xff09; <!-- 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 组件实现可搜索的树&#xff0c;在这里我会详细介绍每个方法&#xff0c;以及容易踩坑的点。 效果图&#xff1a; 首先是要导入的文件 // React 自带的属性 import React, { useMemo, useState } from react; // antd 组件库中的&#xff0c;输入…...

Linux系统编程之信号(上)

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

23.Netty源码之内置解码器

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

sigmoid ReLU 等激活函数总结

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

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…...

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时遇到报错后的解读以及解决方案 二、报错提示 三、分层解读 遇到报错的时候&#xff0c;我们需要…...

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

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

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

使用Redis来实现点赞功能是一种高效的选择&#xff0c;因为Redis是一个内存数据库&#xff0c;适用于处理高并发的数据操作。以下是一个基本的点赞功能在Redis中的设计示例&#xff1a; 假设我们有一个文章或帖子&#xff0c;用户可以对其进行点赞&#xff0c;取消点赞&#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是什么&#xff1f; RestTemplate是由Spring框架提供的一个可用于应用中调用rest服务的类它简化了与http服务的通信方式。 RestTemplate是一个执行HTTP请求的同步阻塞式工具类&#xff0c;它仅仅只是在 HTTP 客户端库&#xff08;例如 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…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...