使用js实现思维导图

最新推荐文章于 2024-09-23 15:06:15 发布
最新推荐文章于 2024-09-23 15:06:15 发布
阅读量2.6k 收藏 10
点赞数
分类专栏： Javascript /Jquery / Bootstrap / Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5904/article/details/82641381
版权
本文介绍了使用JavaScript实现思维导图的关键技术，包括子节点位置的重绘、祖先节点同级节点的垂直位置调整和拖动节点。通过SVG绘制，实现了动态交互的思维导图。提供了一个demo和源码链接供读者参考学习。
摘要由CSDN通过智能技术生成

本文主要阐述使用js实现思维导图的关键技术点，如果还不知道什么是思维导图的同学，请自行度娘。以下是demo和源码的传送门：


demo：http://sources.ikeepstudying.com/mindmaptree-master/
源码：http://github.com/RockyRen/mindmaptree/tree/master

下载：mindmaptree-master

 

在源码中我使用了svg绘制思维导图。与canvas相比，svg将图像当成对象，我们可将思维导图中节点和线等图形表现为对象，而且svg更适合用于动态交互的应用

 

下面介绍几个关键技术点：

 

子节点位置的重绘
一个基本的思维导图工具应该拥有增加节点和删除节点的功能。在某个节点上增删节点时，为了使得所有子节点的高度相对于该节点垂直居中，都会重新渲染子节点的垂直位

最低0.47元/天 解锁文章
iteye_5904
关注
专栏目录
Js思维导图
06-04
提供网页制作的思维导图
javascript思维导图（全）
09-24
javascript思维导图（全）javascript思维导图（全）javascript思维导图（全）javascript思维导图（全）javascript思维导图（全）javascript思维导图（全）
jsMind创建思维导图基本使用
最新发布
qq_43641110的博客
09-23 738
jsMind 是一个用于显示和编辑思维导图的纯 JavaScript 类库。它基于 Canvas 和 SVG 进行设计，能够在现代浏览器中高效地运行。jsMind 以 BSD 协议开源，这意味着可以在遵守该协议的前提下，将其嵌入到任何项目中使用。
js实现一个简单的思维导图
liuhao9999的博客
02-22 692
创建一个思维导图涉及到很多细节，包括节点、链接、样式、交互等。下面是一个简单的使用 JavaScript 和 HTML 创建的思维导图示例。这个示例使用了基本的 DOM 操作和递归函数来创建节点。首先，我们需要创建一个 HTML 文件来放置我们的思维导图。
js画思维导图代码
weixin_73675558的博客
05-21 776
在JavaScript中，您可以使用各种库来绘制思维导图，例如mindmap.jsd3.js或go.js。下面是一个简单的例子，展示了如何使用d3.js来绘制一个基本的思维导图。首先，您需要在HTML文件中包含d3.js</</</</</</</然后，在mindmap.js这段代码创建了一个简单的思维导图，其中包含一个中心主题和四个分支主题。节点之间通过连线连接，并且可以通过拖拽来移动。这是一个基本的示例，您可以根据需要添加更多的功能和样式。请注意，这个示例使用了d3.js。
jsmind-网页版的由js实现的思维导图
热门推荐
xiaozhuangyumaotao的博客
04-18 1万+
有时候，我们可能需要在网页上展示思维导图般的效果，比如现在有个要展示某个数据库表与其他表的关系，这些关系可能有业务依赖、键依赖、调度依赖等，怎么更直观的展示这些关系呢？思维导图是个不错的选择，效果就像一些流行的思维导图比如xmind等软件一样，但是我们这些做javaEE开发的是和浏览器打交道的，有在浏览器上画思维导图的js或者jquery插件吗?经过在网上一番搜寻之后，还真是功夫不负有心人，发现了...
js脑图思维导图插件.zip
07-02
在信息技术日益发达的今天，思维导图作为一种有效的信息组织工具，受到了广泛的关注和使用。它可以帮助我们清晰地梳理思路，提高工作效率，尤其是在项目管理、学习笔记、问题解决等方面。今天我们要介绍的是一款基于...
纯css3实现思维导图样式示例
12-30
思维导图又称之为脑图 他大概是这个样子滴： 网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？ 答案是肯定的 下面上代码 html代码 <h1>node1 <h1>...
d3.js的API思维导图
03-23
【材料】：d3.js的API思维导图，图片形式 【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架...
可视化扩展——jsMind实现思维导图
sdu_21_lyh的博客
06-24 2942
在vue中使用jsmind实现思维导图
JS思维导图
10-12
个人写的JS思维导图，有兴趣的小伙伴可以下载，绝对超值
js思维导图
01-21
js思维导图
完整js思维导图/框架图
04-20
不知不觉做前端已经五年多了，无论是从最初的jQuery还是现在火热的Angular，Vue，React等前端框架，甚至是nodejs等服务端的兴起，归根到底，我始终觉着一切的核心还是JavaScript。于是最近就有了一个想法，想要梳理一下这些年学习以及使用JS的心得。 本系列文章主要是针对JS的相关知识点做一个类似提纲似的提炼，一来可以作为今后温故知新的参照；二来也是希望能够帮助大家更加系统清晰的理解JS这门语言。 下面是完整的js思维导图，欢迎下载！
jsmind js版脑图 在线脑图
11-19
自己实现了个节点的复制粘贴功能，另外把一些快捷键改写了，编辑改成 插入子节点改为 。还将输入框改为div版 ，可根据输入内容长度自动变化
（收藏）使用js实现思维导图
jackyrongvip的专栏
01-08 1186
http://www.alloyteam.com/2015/08/shi-yong-js-shi-xian-si-wei-dao-tu/ 使用js实现思维导图 demo：http://rockyren.github.io/mindmaptree/ 源码：http://github.com/RockyRen/mindmaptree/tree/master...
做了一个js-function类型的思维导图
读书就是赚钱
03-16 948
最近学习了js高级程序设计，遇到function类型，做了一个思维导图方便理解
JavaScript如何生成思维导图(mindmap)
weixin_30603633的博客
04-21 407
JavaScript如何生成思维导图(mindmap) 一、总结 一句话总结：可以直接用gojs gojs 二、一个用JavaScript生成思维导图(mindmap)的github repo（转） 转自：一个用JavaScript生成思维导图(mindmap)的github repo - JerryWangSAP - 博客园https://www.cnblo...
html + css +javascript 实现思维导图
11-25
实现思维导图可以通过HTML，CSS和JavaScript来实现。首先，可以使用HTML来构建思维导图的基本结构，例如使用<ul>和<li>标签来表示导图的节点和分支。通过嵌套列表的方式来表示思维导图的层级结构。 接着，可以利用CSS来美化思维导图，包括节点的样式、颜色、文本大小、边框等。通过设定不同的CSS样式来区分不同的节点类型，以及连接线的样式，使得思维导图看起来更加美观和清晰。 最后，可以利用JavaScript来实现思维导图的交互功能，比如展开和收缩节点、拖拽调整节点位置、添加新节点等。通过监听用户的操作事件，比如点击、拖拽等，来对思维导图进行动态的更新和操作。 总之，利用HTML来构建节点，CSS来美化样式，JavaScript来实现交互功能，即可实现思维导图的功能。当用户与思维导图交互时，JavaScript可以实现实时更新和响应，从而提供更好的用户体验。这样的思维导图不仅可以在网页上实现，也可以应用到各种项目管理工具中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值