stackoom
  简体   繁体   中英

How can I make a curve line to join two node in HTML and CSS?

 原文  2020-11-04 11:00:10  3   2    javascript/ html/ css

Question

I have two div and I want to connect them using a curve graph. Any idea how can I achieve that? if you run the below-mentioned code you see there is tag named "Command Sequence Starting". and two divs W_SCMadl_refresh and WIN64_MCCMon respectively, now I wanna connect with this two div using a curve line to the "Command Sequence Starting" 

 .mv-thread, .mv-sequence { display: inline-block; } .mv-sequence, .mv-subsequence { border: solid 1px #e0e0e0; border-radius: 15px; margin: 85px; padding: 10px; text-align: center; } .mv-sequence>.title, .mv-subsequence>.title { font-size: 17px; background-color: cadetblue; border-radius: 7px 0px; color: #fff; font-weight: bold; padding: 10px; } .mv-sequence>.body, .mv-subsequence>.body { min-width: max-content; display: inline-block; text-align: left; } .mv-command>div.indicator { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 32px; text-align: center; font-size: 17px; } .mv-command>span { font-size: 13px; font-weight: bold; } .mv-command:before { content: ""; background-color: #000; width: 3px; height: 16px; display: block; margin-left: 14px; } /* for done*/ .mv-command.done:before { background: #477738; } .mv-cmd-done { background: #57b847; } .mv-cmd-done>a>span, .mv-command.done>span { color: #477738; } /* for aborted*/ .mv-command.aborted:before { background: #844138; } .mv-cmd-aborted { background: #ea4f37; } .mv-cmd-aborted>a>span, .mv-command.aborted>span { color: #844138; } /* for waiting*/ .mv-command.waiting:before { background-color: #808080; } .mv-cmd-waiting { background: #f1f1f1; } .mv-cmd-waiting>span, .mv-command.waiting>span { color: #808080; } /* for disabled*/ .mv-command.disabled:before { background: #80808080; } .mv-cmd-disabled { border: 1px solid #80808080; } .mv-cmd-disabled>span, .mv-command.disabled>span { color: #80808080; } /* for running */ .mv-command.running:before { background: #005686; } .mv-cmd-running { border: 1px solid #005686; } .mv-cmd-running>a>span { color: #80808080; animation: mymove 2s infinite; } @keyframes mymove { from { color: #fff; } to { color: #368ec4; } } .mv-command.running>span { color: #80808080; animation: mymove 2s infinite; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <title>ReleaseWork</title> </head> <body> <div> <div class="mv-sequence"> <div class="body"> <div class="mv-thread"> <table style="width:100%"> <span class="mv-sequence" style="background-color: green; color: aliceblue;">Command Sequence Starting</span> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"> <div> <div class="body"> <div class="mv-command done"> <span style="display:none" class="cmd-text">[ScmRefresh]</span> <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_SCMadl_refresh</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">adl_photo</span> <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_photo</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">code:[ScmCollect] -cr_later</span> <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_collect</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">adl_collect_cr</span> <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_collect_cr</span> </div> <div> <div class="body"> <div class="mv-command aborted"> <span style="display:none" class="cmd-text">[ScmSync]</span> <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span class="fonticon fonticon-wrong"></span></a></div> <span>W_adl_sync</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">[ScmAttach] -attached_fw_mod</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_attach</span> </div> </div> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">adl_publish</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_publish</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">code:[ScmDsWs] [workspace]</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_ds_ws</span> </div> </div> </div> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"> <div> <div class="body"> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">if not exist [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir] mkdir [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir]</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W64_Shared_Preq_mkdir</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">mkCopyPreq -W [WIN64_DRIVE]\\[WIN64_DIR] -p [WIN_PREQ_DIR] -t [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir] -d -o win_b64 -retry 10 -time 30 -copyretry 10 -copytime 30</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W64_mkCopyPreq</span> </div> </div> </div> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> <td style="vertical-align: top;"> <div> <div class="body"> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div class="mv-command done"> <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span class="fonticon fonticon-check"></span></a></div> <span>WIN64_MCCMon</span> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>

This is the kind of thing I'd like:

在此处输入图片说明

2 answers

solution1
 1  2020-11-04 12:34:21

 .mv-thread, .mv-sequence { display: inline-block; } .mv-sequence, .mv-subsequence { border: solid 1px #e0e0e0; border-radius: 15px; margin: 85px; padding: 10px; text-align: center; } .mv-sequence>.title, .mv-subsequence>.title { font-size: 17px; background-color: cadetblue; border-radius: 7px 0px; color: #fff; font-weight: bold; padding: 10px; } .mv-sequence>.body, .mv-subsequence>.body { min-width: max-content; display: inline-block; text-align: left; } .mv-command>div.indicator { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 32px; text-align: center; font-size: 17px; } .mv-command>span { font-size: 13px; font-weight: bold; } .mv-command:before { content: ""; background-color: #000; width: 3px; height: 16px; display: block; margin-left: 14px; } /* for done*/ .mv-command.done:before { background: #477738; } .mv-cmd-done { background: #57b847; } .mv-cmd-done>a>span, .mv-command.done>span { color: #477738; } /* for aborted*/ .mv-command.aborted:before { background: #844138; } .mv-cmd-aborted { background: #ea4f37; } .mv-cmd-aborted>a>span, .mv-command.aborted>span { color: #844138; } /* for waiting*/ .mv-command.waiting:before { background-color: #808080; } .mv-cmd-waiting { background: #f1f1f1; } .mv-cmd-waiting>span, .mv-command.waiting>span { color: #808080; } /* for disabled*/ .mv-command.disabled:before { background: #80808080; } .mv-cmd-disabled { border: 1px solid #80808080; } .mv-cmd-disabled>span, .mv-command.disabled>span { color: #80808080; } /* for running */ .mv-command.running:before { background: #005686; } .mv-cmd-running { border: 1px solid #005686; } .mv-cmd-running>a>span { color: #80808080; animation: mymove 2s infinite; } @keyframes mymove { from { color: #fff; } to { color: #368ec4; } } .mv-command.running>span { color: #80808080; animation: mymove 2s infinite; } .vLine{ background: gray; border: 1px solid gray; border-image: none; left: 100px; top: 38px; width: 1px; height: 50px; position: absolute; } .div1{ border-radius: 35px; border: 3px solid gray; border-image: none; left: 17px; top: 148px; width: 212px; height: 100px; position: absolute; clip: rect(0px, 100px, 70px, 0px); } .div2{ border-radius: 35px; border: 3px solid gray; border-image: none; left: 16px; top: 148px; width: 212px; height: 100px; position: absolute; clip: rect(0px, 264px, 70px, 180px); } .div3{ border-radius: 30px; border: 3px solid gray; border-image: none; left: 60px; top: 95px; width: 100px; height: 50px; position: absolute; clip: rect(30px, 264px, 100px, 50px); } .div4{ border-radius: 35px; border: 3px solid gray; border-image: none; left: 162px; top: 95px; width: 100px; height: 50px; position: absolute; clip: rect(30px, 40px, 100px, 0px); } .div5{ border-radius: 35px; border: 3px solid gray; border-image: none; left: 0px; top: 222px; width: 230px; height: 490px; position: absolute; clip: rect(40px, 450px, 500px, 40px); }
 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <title>ReleaseWork</title> </head> <body> <div> <div class="mv-sequence"> <div class="body"> <div class="mv-thread" style="position:relative" > <table style="width:100%"> <span class="mv-sequence" style="background-color: green; color: aliceblue; position:relative">Command Sequence Starting </span> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"> <div> <div class="body"> <div class="mv-command done"> <span style="display:none" class="cmd-text">[ScmRefresh]</span> <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_SCMadl_refresh</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">adl_photo</span> <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_photo</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">code:[ScmCollect] -cr_later</span> <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_collect</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">adl_collect_cr</span> <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_collect_cr</span> </div> <div> <div class="body"> <div class="mv-command aborted"> <span style="display:none" class="cmd-text">[ScmSync]</span> <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span class="fonticon fonticon-wrong"></span></a></div> <span>W_adl_sync</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">[ScmAttach] -attached_fw_mod</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_attach</span> </div> </div> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">adl_publish</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_publish</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">code:[ScmDsWs] [workspace]</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_ds_ws</span> </div> </div> </div> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"> <div> <div class="body"> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">if not exist [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir] mkdir [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir]</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W64_Shared_Preq_mkdir</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">mkCopyPreq -W [WIN64_DRIVE]\\[WIN64_DIR] -p [WIN_PREQ_DIR] -t [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir] -d -o win_b64 -retry 10 -time 30 -copyretry 10 -copytime 30</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W64_mkCopyPreq</span> </div> </div> </div> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> <td style="vertical-align: top;"> <div> <div class="body"> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div class="mv-command done"> <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span class="fonticon fonticon-check"></span></a></div> <span>WIN64_MCCMon</span> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </div> </div> </div> </div> </body> </html>

solution2
 1 ACCPTED  2020-11-04 13:41:41

The browser's ability to display SVGs - and create 'em on the fly - can come in handy in this case. This way you don't have to manually hardcode the lines into the html - you just tell the browser what element's it should connect.

Basically you add an empty HTML <svg> element into the body and make sure it's in the background of the objects you want to connect. This can be done by eg setting it's CSS z-index property to a negative value.

Afterwards:

  • figure out the screen coordinates of the two objects you want to connect
  • create a svg <path> element, which connects the two coordinates with a line/curve
  • append that path to the svg

The hard part with this solution though is getting your actual objects! If we take a closer look at your html, we realize you put all labeling of the objects inside <span> elements. That's great because we can simply use

document.getElementsByTagName("span")

to get a HTMLCollection of all the span elements on your site. If we now go further, inspect the .innerText property of the elements inside this collection and compare it to one of the object's textes eg W_SCMadl_refresh we can get a reference to the actual object. Unfortunately we aren't really interested in the span element itself since you want to connect the lines with one of it's parent's child DIVs.

Let's inspect those child elements. We can see those are all DIVs again which have a CSS class of indicator mv-cmd-done , indicator mv-cmd-aborted , ...

So to actually get one of those elements we need to search the parent containers children's classNames for the presence of the string indicator like:

element.className.indexOf("indicator") != -1

The only element in your hierachy that ain't got such an element is the top-most Command Sequence Starting - so we need to include an exception.

Everything put together looks a little bit like this (just click on 'Run code snippet'): 

 let paths = document.getElementById("paths"); let connections2 = []; function getElement(element) { for (let a = 0; a < element.length; a++) { if (element[a].className.indexOf("indicator") != -1) { return element[a]; } } return null; } function connectElements(connections) { let spans = document.getElementsByTagName("span"); let start; let end; let temp; for (let a = 0; a < connections.length; a += 2) { for (let b = 0; b < spans.length; b++) { if (spans[b].innerText == connections[a]) { start = getElement(spans[b].parentElement.children); } if (spans[b].innerText == connections[a + 1]) { if (connections[a + 1] == "Command Sequence Starting") { end = spans[b]; } else { end = getElement(spans[b].parentElement.children); } } } connections2.push({ start: start, end: end }); } coordinates(); } function coordinates() { let padding = 5; let bezierWeight = 0.5; let oldPaths = paths.children; for (let a = oldPaths.length - 1; a >= 0; a--) { paths.removeChild(oldPaths[a]); } let x1, y1, x4, y4, dx, x2, x3, path, start, end; for (let a = 0; a < connections2.length; a++) { start = $(connections2[a].start); end = $(connections2[a].end); x1 = start.offset().left + start.width() / 2 - padding; y1 = start.offset().top + start.height() / 2 - padding; x4 = end.offset().left + start.width() / 2 - padding; y4 = end.offset().top + start.height() / 2 - padding; dx = Math.abs(x4 - x1) * bezierWeight; if (x4 < x1) { x2 = x1 - dx; x3 = x4 + dx; } else { x2 = x1 + dx; x3 = x4 - dx; } data = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`; path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", data); path.setAttribute("class", "path"); paths.appendChild(path); } } connectElements(["W_SCMadl_refresh", "Command Sequence Starting", "WIN64_MCCMon", "Command Sequence Starting", "W64_mkCopyPreq", "WIN64_MCCMon"]);
 #paths { z-index: -1; position: absolute; } .path { fill: none; stroke: #3ed21b; stroke-width: 6; } .mv-thread, .mv-sequence { display: inline-block; } .mv-sequence, .mv-subsequence { border: solid 1px #e0e0e0; border-radius: 15px; margin: 85px; padding: 10px; text-align: center; } .mv-sequence>.title, .mv-subsequence>.title { font-size: 17px; background-color: cadetblue; border-radius: 7px 0px; color: #fff; font-weight: bold; padding: 10px; } .mv-sequence>.body, .mv-subsequence>.body { min-width: max-content; display: inline-block; text-align: left; } .mv-command>div.indicator { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 32px; text-align: center; font-size: 17px; } .mv-command>span { font-size: 13px; font-weight: bold; } .mv-command:before { content: ""; background-color: #000; width: 3px; height: 16px; display: block; margin-left: 14px; } /* for done*/ .mv-command.done:before { background: #477738; } .mv-cmd-done { background: #57b847; } .mv-cmd-done>a>span, .mv-command.done>span { color: #477738; } /* for aborted*/ .mv-command.aborted:before { background: #844138; } .mv-cmd-aborted { background: #ea4f37; } .mv-cmd-aborted>a>span, .mv-command.aborted>span { color: #844138; } /* for waiting*/ .mv-command.waiting:before { background-color: #808080; } .mv-cmd-waiting { background: #f1f1f1; } .mv-cmd-waiting>span, .mv-command.waiting>span { color: #808080; } /* for disabled*/ .mv-command.disabled:before { background: #80808080; } .mv-cmd-disabled { border: 1px solid #80808080; } .mv-cmd-disabled>span, .mv-command.disabled>span { color: #80808080; } /* for running */ .mv-command.running:before { background: #005686; } .mv-cmd-running { border: 1px solid #005686; } .mv-cmd-running>a>span { color: #80808080; animation: mymove 2s infinite; } @keyframes mymove { from { color: #fff; } to { color: #368ec4; } } .mv-command.running>span { color: #80808080; animation: mymove 2s infinite; }
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <svg height="1000" width="1000" id="paths"> </svg> <div> <div class="mv-sequence"> <div class="body"> <div class="mv-thread"> <table style="width:100%"> <span class="mv-sequence" style="background-color: green; color: aliceblue;">Command Sequence Starting</span> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"> <div> <div class="body"> <div class="mv-command done"> <span style="display:none" class="cmd-text">[ScmRefresh]</span> <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_SCMadl_refresh</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">adl_photo</span> <div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_photo</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">code:[ScmCollect] -cr_later</span> <div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_collect</span> </div> <div class="mv-command done"> <span style="display:none" class="cmd-text">adl_collect_cr</span> <div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span class="fonticon fonticon-check"></span></a></div> <span>W_adl_collect_cr</span> </div> <div> <div class="body"> <div class="mv-command aborted"> <span style="display:none" class="cmd-text">[ScmSync]</span> <div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span class="fonticon fonticon-wrong"></span></a></div> <span>W_adl_sync</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">[ScmAttach] -attached_fw_mod</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_attach</span> </div> </div> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">adl_publish</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_publish</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">code:[ScmDsWs] [workspace]</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W_adl_ds_ws</span> </div> </div> </div> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"> <div> <div class="body"> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">if not exist [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir] mkdir [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir]</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W64_Shared_Preq_mkdir</span> </div> <div class="mv-command waiting"> <span style="display:none" class="cmd-text">mkCopyPreq -W [WIN64_DRIVE]\\[WIN64_DIR] -p [WIN_PREQ_DIR] -t [WIN64_DRIVE]\\[WIN64_DIR]\\[PreqDir] -d -o win_b64 -retry 10 -time 30 -copyretry 10 -copytime 30</span> <div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div> <span>W64_mkCopyPreq</span> </div> </div> </div> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div> <div class="body"></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> <td style="vertical-align: top;"> <div> <div class="body"> <div class="mv-thread"> <table style="width:100%"> <tbody> <tr> <td style="vertical-align: top;"> <div class="mv-command done"> <div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span class="fonticon fonticon-check"></span></a></div> <span>WIN64_MCCMon</span> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div>

As you can see there's a simple and handy connectElements() function which accepts an array of strings as a parameter. This strings are the text labels of the objects you want to connect. eg W_SCMadl_refresh and Command Sequence Starting

connectElements(["W_SCMadl_refresh", "Command Sequence Starting"]);

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I make dynamic text scroll on a curve in HTML/Javascript/CSS? How can I make straight line instead of curve line in d3 force layout? How to add vertical line division and legend in curve box html and css? How can I make a counter in HTML/CSS How can I make a curvy line shape in CSS or Javascript How can I make a function with two parameters to find if a node exists? How can I make two words appear in the same line in React? how can I make a html and css component by javascript? How can I make a page move onMouseRelease with html/css? How can i make it show the bottom of this element? (HTML, CSS, JS)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM