基于d3(v5.x)/jquery和svg,初步实现流程图和思维导图_基于svg实现思维导图-优快云博客

本文介绍了如何利用d3(v5.x)和jQuery结合SVG实现流程图和思维导图的初步功能，特别是元素之间的连线操作。通过SVG的line或path元素进行连线，并提供了实现拖放功能的示例代码，展示了如何计算坐标和添加连线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于d3(v5.x)（主要用到选择器）或者jquery（也是主要用选择器）实现初步元素之间连线，因为在做流程图和思维导图用到的主要技术就是元素之间的连线，通过svg可以将dom元素连接起来。经过此次编写个人认为主要是坐标的计算。在通过svg里面的line或者path画线即可。

下面为实现的代码（代码里有注释）和示意图。仅供参考（如果能帮到别人当然更好）。

下图所示，左边的div里面的元素都可以拖动到右边的div里面（右边div自动过滤重复元素），并且两侧对应连线。

因为只实现js部分所以没有样式。看上去很low。。。。

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://d3js.org/d3.v5.js"></script>
<title>my-project</title>
</head>
<body>
<script>
var data = [
{
number: "num1",
numberChild: [
{ child: "child1" },
{ child: "child2" },
{ child: "child3" }
]
},
{ number: "num2" },
{ number: "num3" }
];

// console.log(data);
//画图区域
var basefram ="<div class='basefram' id='basefram' style='width:100%;height:400px;position:relative;top:0;left:0;z-index:1;border:1px solid #ccc;background:#ccc;'></div>";
d3.select("body").html(basefram);

//创建第一个div(添加元素拖动)
initmain(data);

//创建第二个div
initsecond(data);

function initmain(array) {
var parent = document.getElementById("basefram"); //添加 div
var div = document.createElement("div"); //设置 div 属性，如 id
div.setAttribute("id", "first");
div.setAttribute("class", "first");
div.setAttribute(
"style",
"width:100px;height:200px;border:1px solid black;float:left;"
&