如何使用JavaScript绘制多堆栈、多对多关系图，如所附图片中所示？
我想用JavaScript绘制一个关系图（如上图所示）。我已经尝试了很多js库，比如D3、GoJs、JsPlumb等，但都没有满足我的需求。请查看以下附加要求如何使用JavaScript绘制多堆栈、多对多关系图，如所附图片中所示？,javascript,mapping,line,relationship,diagram,Javascript,Mapping,Line,Relationship,Diagram,我想用JavaScript绘制一个关系图（如上图所示）。我已经尝试了很多js库，比如D3、GoJs、JsPlumb等，但都没有满足我的需求。请查看以下附加要求 这些框（例如业务体系结构>流程>解决投诉）最多可以有四个内部级别 任何框都可以与任何框连接（内部-与组中的节点连接，外部-与其他组中的节点连接） 关系可以是单向和双向的（单侧箭头和双侧箭头），并且应该具有关系类型（例如流程） 每个框（所有级别）都应该有四个可单击的热点 可以另存为模板以备将来修改 数据源是JSON 此解决方案是在中创建的
此解决方案是在中创建的 这是结果。很抱歉，我觉得无法输入您截图中的所有数据，所以我只输入了前两组数据。而且我也没有把东西设计得很好。 这是完整的页面，包括JSON格式的图表模型数据：
<!DOCTYPE html>
<html>
<head>
<title>Simple Nested Relationships in GoJS</title>
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
function makePort(id, spot) {
return $(go.Shape,
{
fill: "transparent", strokeWidth: 0,
width: 10, height: 10,
alignment: spot, alignmentFocus: spot,
portId: id,
fromLinkable: true, toLinkable: true, cursor: "pointer"
});
}
myDiagram.nodeTemplate =
$(go.Node, "Spot",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color"),
new go.Binding("figure"),
new go.Binding("angle", "figure", function(f) { return f === "Hexagon" ? 90 : 0; })),
$(go.TextBlock,
{ margin: 4, editable: true, maxSize: new go.Size(150, NaN), textAlign: "center" },
new go.Binding("text").makeTwoWay())
),
makePort("T", go.Spot.Top),
makePort("R", go.Spot.Right),
makePort("B", go.Spot.Bottom),
makePort("L", go.Spot.Left)
);
myDiagram.groupTemplate =
$(go.Group, "Spot",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Auto",
$(go.Shape,
{ fill: "whitesmoke" },
new go.Binding("fill", "color"),
new go.Binding("stroke", "color", go.Brush.darken)),
$(go.Panel, "Vertical",
$(go.TextBlock,
{ margin: 4, editable: true },
new go.Binding("text").makeTwoWay()),
$(go.Placeholder, { padding: 10 })
)
),
makePort("T", go.Spot.Top),
makePort("R", go.Spot.Right),
makePort("B", go.Spot.Bottom),
makePort("L", go.Spot.Left)
);
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 }),
$(go.Shape, { fromArrow: "Standard", visible: false },
new go.Binding("visible", "from")),
$(go.Shape, { toArrow: "Standard" }),
$(go.TextBlock,
{ font: "11px sans-serif", editable: true },
new go.Binding("text").makeTwoWay())
);
myDiagram.model = go.Model.fromJson(
'{ "class": "go.GraphLinksModel",\
"linkFromPortIdProperty": "fp",\
"linkToPortIdProperty": "tp",\
"nodeDataArray": [\
{ "key": 1, "text": "Strategic Planning", "color": "lightgreen", "isGroup": true, "loc": "10.5 22" },\
{ "key": 11, "text": "Business Policy", "color": "rgba(182, 255, 180, 1)", "isGroup": true, "group": 1, "loc": "21 116" },\
{ "key": 111, "text": "Adhere to FSA Guidelines", "color": "lightgreen", "figure": "Hexagon", "group": 11, "loc": "31 126" },\
{ "key": 12, "text": "Strategy", "color": "rgba(182, 255, 180, 1)", "isGroup": true, "group": 1, "loc": "162 55" },\
{ "key": 121, "text": "Adopt Customer\\nComplaints Process", "color": "lightskyblue", "group": 12, "loc": "172 65" },\
{ "key": 122, "text": "Mission and\\nVision", "color": "plum", "group": 12, "loc": "274 136" },\
{ "key": 123, "text": "Improve Customer Satisfaction", "color": "lightskyblue", "group": 12, "loc": "177 206" },\
{ "key": 124, "text": "Decisions made wlil Maximize Benefit to the Enterprise", "color": "lightskyblue", "group": 12, "loc": "304 203" },\
{ "key": 2, "text": "Business Architecture", "color": "silver", "isGroup": true, "loc": "503 21" },\
{ "key": 21, "text": "Process", "color": "lightgray", "isGroup": true, "group": 2, "loc": "514 54" },\
{ "key": 211, "text": "Complaints\\n Handling", "color": "lightgreen", "figure":"Hexagon", "group": 21, "loc": "546 35" },\
{ "key": 212, "text": "Resolve \\nComplaint", "color": "lightskyblue", "group": 21, "loc": "679 64" },\
{ "key": 213, "text": "Complaints\\n Handling", "color": "lightskyblue", "group": 21, "loc": "550 145" },\
{ "key": 22, "text": "Organization", "color": "lightgray", "isGroup": true, "group": 2, "loc": "842 55" },\
{ "key": 221, "text": "Complaints \\nCall Handler", "color": "lightskyblue", "group": 22, "loc": "852 65.6" },\
{ "key": -18, "text": "Complaints \\nClient", "color": "lightskyblue", "group": 22, "loc": "854 142" },\
{ "key": -19, "text": "Complaints \\nManager", "color": "lightskyblue", "group": 22, "loc": "852 225" },\
{ "key": 23, "text": "Business Service", "color": "lightgray", "isGroup": true, "group": 2, "loc": "514 217" },\
{ "key": 231, "text": "Manage \\nComplaints", "color": "lightskyblue", "group": 23, "loc": "550 247" }\
],\
"linkDataArray": [\
{ "from": 111, "to": 123, "fp": "R", "tp": "L" },\
{ "from": 121, "to": 123, "fp": "B", "tp": "T", "text": "Process" },\
{ "from": 121, "to": 122, "fp": "B", "tp": "T", "text": "Process" },\
{ "from": 121, "to": 211, "fp": "R", "tp": "L", "text": "Process" },\
{ "from": 121, "to": 231, "fp": "R", "tp": "L", "text": "Process" },\
{ "from": 211, "to": 213, "fp": "B", "tp": "T", "text": "Process type:\\nProcess" },\
{ "from": 231, "to": 213, "fp": "T", "tp": "B", "text": "Process" },\
{ "from": 231, "to": 212, "fp": "T", "tp": "B" },\
{ "from": 212, "to": -19, "fp": "B", "tp": "L", "text": "Process" },\
{ "from": 212, "to": -18, "fp": "B", "tp": "L", "text": "Process" },\
{ "from": 212, "to": 221, "fp": "R", "tp": "L", "text": "Process" }\
]\
}'
);
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
GoJS中的简单嵌套关系
函数init（）{
var$=go.GraphObject.make；
我的图表=
$（go.Diagram，“myDiagramDiv”，
{
initialContentAlignment:go.Spot.Center，
“undoManager.isEnabled”：真
});
函数makePort（id，spot）{
返回$（go.Shape，
{
填充：“透明”，笔划宽度：0，
宽度：10，高度：10，
对齐：点，对齐焦点：点，
鲍蒂德：身份证，
fromLinkable:true，toLinkable:true，光标：“指针”
});
}
myDiagram.nodeTemplate=
$（go.Node，“Spot”，
新的go.Binding（“location”、“loc”、go.Point.parse）.MakeToway（go.Point.stringify），
$（go.Panel，“自动”，
$（go.Shape，“RoundedRectangle”，
{填充：“白色”}，
新go.装订（“填充”、“颜色”），
新go.装订（“图”），
新的go.Binding（“角度”，“图形”，函数（f）{return f===“Hexagon”？90:0；}），
$（go.TextBlock，
{边距：4，可编辑：true，maxSize:new go.Size（150，NaN），textAlign:“center”}，
新的go.Binding（“text”）.maketoway（）
),
makePort（“T”，go.Spot.Top），
makePort（“R”，转，点，右），
makePort（“B”，go.Spot.Bottom），
makePort（“L”，开始。点。左）
);
myDiagram.groupTemplate=
$（go.Group，“Spot”，
新的go.Binding（“location”、“loc”、go.Point.parse）.MakeToway（go.Point.stringify），
$（go.Panel，“自动”，
$（go.Shape，
{填充：“白烟”}，
新go.装订（“填充”、“颜色”），
新go.Binding（“笔划”、“颜色”、go.Brush.darken”），
$（go.Panel，“垂直”，
$（go.TextBlock，
{边距：4，可编辑：真}，
新的go.Binding（“text”）.MakeToway（）），
$（go.Placeholder，{padding:10}）
)
),
makePort（“T”，go.Spot.Top），
makePort（“R”，转，点，右），
makePort（“B”，go.Spot.Bottom），
makePort（“L”，开始。点。左）
);
myDiagram.linkTemplate=
$（go.Link，
$（go.Shape，{strokeWidth:2}），
$（go.Shape，{fromArrow:“标准”，可见：false}，
新go.Binding（“可见”、“来自”），
$（go.Shape，{toArrow:“Standard”}），
$（go.TextBlock，
{font:“11px无衬线”，可编辑：true}，
新的go.Binding（“text”）.maketoway（）
);
myDiagram.model=go.model.fromJson(
“{”类“：“go.graphlinkmodel”\
“linkFromPortIdProperty”：“fp”\
“linkToPortIdProperty”：“tp”\
“nodeDataArray”：[\
{“关键”：1，“文本”：“战略规划”，“颜色”：“浅绿色”，“isGroup”：正确，“loc”：“10.5 22”}\
{“key”：11，“text”：“Business Policy”，“color”：“rgba（182，255，180，1）”，“isGroup”：true，“group”：1，“loc”：“21 116”}\
{“key”：111，“text”：“遵守FSA指南”，“color”：“浅绿色”，“figure”：“Hexagon”，“group”：11，“loc”：“31126”}\
{“key”：12，“text”：“Strategy”，“color”：“rgba（182255，180，1）”，“isGroup”：true，“group”：1，“loc”：“16255”}\
{“key”：121，“text”：“采用客户\\n投诉流程”，“color”：“lightskyblue”，“group”：12，“loc”：“17265”}\
{“key”：122，“text”：“Mission and\\n vision”，“color”：“plum”，“group”：12，“loc”：“274 136”}\
{“key”：123，“text”：“提高客户满意度”，“color”：“lightskyblue”，“group”：12，“loc”：“177 206”}\
{“key”：124，“text”：“做出的决定将为企业带来最大利益”，“color”：“lightskyblue”，“group”：12，“loc”：“304 203”}\
{“key”：2，“text”：“Business Architecture”，“color”：“silver”，“isGroup”：true，“loc”：“503 21”}\
{“key”：21，“text”：“Process”，“color”：“lightgray”，“isGroup”：true，“group”：2，“loc”：“514 54”}\
{“键”：211，“文本”：“投诉处理”，“颜色”：“浅绿色”，“图形”：“六边形”，“组”：21，“loc”：“546 35”}\
{“key”：212，“text”：“Resolve\\n complaint”，“color”：“lightskyblue”，“group”：21，“loc”：“679 64”}\
{“key”：213，“text”：“投诉处理”，“color”：“lightskyblue”，“group”：21，“loc”：“550 145”}\
{“key”：22，“text”：“Organization”，“color”：“lightgray”，“isGroup”：true，“group”：2，“loc”：“842 55”}\
{“key”：221，“text:”投诉\\n呼叫处理程序“，”颜色“：”lightskyblue“，”组“：”22，“loc:”852 65.6“}\
{“key”：-18，“text”：“Complaints\\n客户”，“color”：“lightskyblue”，“group”：22，“loc”：“854 142”}\
{“key”：-19，“text”：“Complaints\\n经理”，“color”：“lightskyblue”，“group”：22，“loc”：“852 225”}\
{“键”：23，“文本”：“业务服务”，“颜色”：