一图读懂：HTML+CSS+JS绘制思维导图的终极指南

前端

2023-10-13 18:41:23

用 HTML、CSS 和 JS 构建思维导图：从零开始

用代码绘制思维导图

思维导图是一种图形工具，用于将复杂信息可视化，提升清晰度和组织性。虽然市面上有许多思维导图软件，但你也可以使用 HTML、CSS 和 JavaScript 从头开始绘制自己的思维导图。

HTML 结构

第一步是创建一个 HTML 文件，定义页面结构。使用 <div> 标签创建一个容器来容纳思维导图。在 <head> 部分链接 CSS 文件，并在 <body> 部分链接 JavaScript 文件。

CSS 样式

CSS 文件定义了思维导图的视觉外观。为容器设置宽度和高度，并使用绝对定位将节点放置在容器内。为节点添加样式，包括背景颜色、边框和字体大小。还定义连接线的样式，如宽度、颜色和位置。

JavaScript 逻辑

JavaScript 文件负责创建和操作思维导图。使用 DOM 操作创建节点和连接线元素，并根据数据或用户输入设置它们的属性。可以添加事件侦听器来实现交互功能，例如在节点上悬停时更改样式。

运行代码

将 HTML、CSS 和 JavaScript 文件放在同一目录下，在浏览器中打开 HTML 文件。你会看到一个可视化的思维导图，展示了你的节点和连接线。

代码示例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="mindmap"></div>

  <script src="script.js"></script>
</body>
</html>

#mindmap {
  width: 100%;
  height: 100vh;
  position: relative;
}

.node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
}

.node:hover {
  background-color: #ccc;
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
}

// 获取思维导图容器
const mindmap = document.getElementById('mindmap');

// 创建根节点
const rootNode = document.createElement('div');
rootNode.classList.add('node');
rootNode.textContent = '思维导图';
mindmap.appendChild(rootNode);

// 创建子节点
const childNode1 = document.createElement('div');
childNode1.classList.add('node');
childNode1.textContent = '子节点1';
mindmap.appendChild(childNode1);

const childNode2 = document.createElement('div');
childNode2.classList.add('node');
childNode2.textContent = '子节点2';
mindmap.appendChild(childNode2);

// 创建连接线
const line1 = document.createElement('div');
line1.classList.add('line');
line1.style.left = '50%';
line1.style.top = '200px';
line1.style.height = '100px';
mindmap.appendChild(line1);

const line2 = document.createElement('div');
line2.classList.add('line');
line2.style.left = '25%';
line2.style.top = '200px';
line2.style.height = '100px';
mindmap.appendChild(line2);