基于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
最低0.47元/天 解锁文章
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
