Javascript 使用复选框可视化MySQL数据

我有一些复选框

如果我选择其中的2个，将出现一个引导模式，其中包含2个部分之间的关系。如果我选择2个数据，我想在复选框中添加第二个按钮，以可视化模式中的关系

因此，第一个按钮显示表中的关系（这正在工作），第二个按钮显示关系

我正在使用VisJS

我的问题是，我将数据存储在MySQL中，我使用PHP作为复选框，当我将节点放入数组时，VisJS正在工作

你知道我该怎么解决这个问题吗？或者有其他方法来实现这一点

使用PHP的复选框

while（$row=mysqli\u fetch\u数组（$result2））{>

这是我没有PHP的代码

$（函数（）{
//缓存我们将重复使用的jQuery对象
var复选框=$（“输入[name=case]”）；
var myModal=$（“#myModal”）；
//获取所有关系，即key=name、value=connect或null
变量关系={}，
用户={}；
复选框。每个（函数（）{
关系[this.dataset.name]=this.dataset.connect；
用户[this.dataset.name]=this.dataset.user；
});
$（'#checkBtn'）。单击（函数（）{
//选中复选框
var checkedboxs=checkBoxes.filter（“：checked”）；
//先验证
如果（checkedboxs.length！==2）{
警告（“您必须选中2个复选框！”）；
返回false；
}
//构建模态体
var html=“name连接到描述”；
var current=checkedboxs[0]。dataset.name，//以开头
end=checkedboxs[1].dataset.name；//以结尾
while（当前）{
html+=“”+当前+“”；
//检查它是否已连接
var next=关系[当前]；
//如果未连接，请停止
如果（！下一个）{
html='不相关'；
打破
}
//否则追加HTML
html+=“”+下一步+“”+用户[当前]+“”；
//如果结束了，停下来
如果（下一个===结束）中断；
//使用连接的一个重新开始
当前=下一个；
}
html+=“”；
//更新模态
myModal.find（'.modal body'）.html（html）；
//准备好后，动态打开模式
myModal.modal（'show'）；
});
})；

名称
连接到
描述
数据1
数据2
说明1
数据2
数据3
说明2
数据3
数据4
说明3
数据4
标题
&时代；
接近

你想要这样的东西吗

var节点=[]；
var边缘=[]；
$（函数（）{
var复选框=$（“输入[name=case]”）；
var myModal=$（“#model4temp”）；
变量关系={}，
用户={}；
复选框。每个（函数（）{
关系[this.dataset.name]=this.dataset.connect；
用户[this.dataset.name]=this.dataset.user；
});
$（'#checkBtn'）。单击（函数（）{
var checkedboxs=checkBoxes.filter（“：checked”）；
如果（checkedboxs.length！==2）{
警告（“您必须选中2个复选框！”）；
返回false；
}
var current=复选框[0]。dataset.name，
end=复选框[1]。dataset.name；
var-id=1；
while（当前）{
push（{id:id，label:current，shape:'box'}）；
var next=关系[当前]；
如果（！下一个）{
html='不相关'；
打破
}
var label=用户[当前]| |“”；
push（{from:id，to:id+1，label:label，font:{align:'top'}，箭头：{to:true}）；
如果（下一步===结束）{
push（{id:id+1，label:next，shape:'box'}）；
打破
}
当前=下一个；
id++；
}
myModal.modal（'show'）；
});
});
函数drawNetwork（）{
var container=document.getElementById（'network-container'）；
风险值数据={
节点：节点，
边缘：边缘
};
var宽度=600；
var高度=500；
变量选项={
宽度：宽度+px，
高度：高度+px，
边缘：{
平滑：假
},
物理学：错，
互动：{
哈弗：没错，
德拉格诺德斯：没错，
zoomView:错，
dragView:错误
}
};
节点=[]；
边=[]；
var网络=新的可视网络（容器、数据、选项）；
}
$（'#model4temp'）。on（'show.bs.modal'，function（）{
drawNetwork（）；
})；

名称
连接到
描述
数据1
数据2
说明1
数据2
数据3
说明2
数据3
数据4
说明3
数据4
&时代；
modal中的样本网络
接近

while($row=mysqli_fetch_array($result2)) { ?>
    <tr>
        <td align="center"><input class="checkboxes" type="checkbox" name="case" data-user="<?php echo $row['conn'];?>" data-name="<?php echo $row['data1'];?>" data-name2="<?php echo $row['data2'];?>"></td>
        <td align="center"><?php echo $row['data1'];?></td>
    </tr>
<?php } ?>