javascript - 如何从 AlloyUI 图表中提取含义？

Question

(抱歉，我是 web 开发的初学者，我不知道这个问题在哪里，因此有这么多标签..)

我一直在玩diagram builder example在合金用户界面中。它看起来很适合绘图，但之后我需要理解它(即将其转换为 xml 格式)，以便我可以将信息发送到另一个应用程序。我试图在渲染后捕获相关的 html 部分，它看起来像这样:

(整理版here)

<div id="myDiagramContainer" class="yui3-widget aui-component aui-diagram-builder aui-diagram-builder-focused">
      <div id="myDiagramBuilder" class="aui-diagram-builder-content aui-layout"><div id="yui_3_9_0pr3_1_1372686463356_237" class="yui3-widget aui-tabbable"><div id="yui_3_9_0pr3_1_1372686463356_239" class="aui-tabbable-content"><ul class="aui-nav aui-nav-tabs"><li id="yui_3_9_0pr3_1_1372686463356_266" class="yui3-widget aui-tab aui-active aui-tab-selected" role="presentation"><a id="yui_3_9_0pr3_1_1372686463356_268" class="aui-tab-content aui-tab-label" role="tab" tabindex="0">Add node</a></li><li id="yui_3_9_0pr3_1_1372686463356_285" class="yui3-widget aui-tab aui-tab-disabled aui-disabled" role="presentation"><a id="yui_3_9_0pr3_1_1372686463356_287" class="aui-tab-content aui-tab-label" role="tab" tabindex="-1">Settings</a></li></ul><div class="aui-tab-content" id="yui_3_9_0pr3_1_1372686463356_719"><div class="aui-tab-pane aui-active" role="tabpanel" aria-labelledby="yui_3_9_0pr3_1_1372686463356_268" id="yui_3_9_0pr3_1_1372686463356_718"><ul class="aui-diagram-builder-fields-container aui-clearfix" id="yui_3_9_0pr3_1_1372686463356_717"><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Start"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-start-icon" id="yui_3_9_0pr3_1_1372686463356_716"></span><div class="aui-diagram-builder-field-label">Start</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Task"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-task-icon" id="yui_3_9_0pr3_1_1372686463356_972"></span><div class="aui-diagram-builder-field-label">Task</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="State"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-state-icon"></span><div class="aui-diagram-builder-field-label">State</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Join"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-join-icon"></span><div class="aui-diagram-builder-field-label">Join</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Fork"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-fork-icon"></span><div class="aui-diagram-builder-field-label">Fork</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Condition"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-condition-icon"></span><div class="aui-diagram-builder-field-label">Condition</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="End"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-end-icon" id="yui_3_9_0pr3_1_1372686463356_1253"></span><div class="aui-diagram-builder-field-label">End</div></li></ul></div><div class="aui-tab-pane" role="tabpanel" aria-labelledby="yui_3_9_0pr3_1_1372686463356_287" id="yui_3_9_0pr3_1_1372686463356_2499"><div id="yui_3_9_0pr3_1_1372686463356_2164" class="aui-table-selection yui3-widget yui3-datatable aui-table aui-table-property-list aui-table-sortable aui-table-scrollable-x aui-table-striped" tabindex="0" style="width: 260px;"><div id="yui_3_9_0pr3_1_1372686463356_2166" class="aui-table-content"><div class="aui-table-x-scroller" style="width: 258px;" id="yui_3_9_0pr3_1_1372686463356_2491"><table cellspacing="0" class="aui-table-table" id="yui_3_9_0pr3_1_1372686463356_2326" style="width: 100%;"><colgroup id="yui_3_9_0pr3_1_1372686463356_2375"><col><col style="width: auto;"></colgroup><thead class="aui-table-columns" id="yui_3_9_0pr3_1_1372686463356_2336"><tr><th id="yui_3_9_0pr3_1_1372686463356_2200" colspan="1" rowspan="1" class="aui-table-header aui-table-first-header aui-table-col-name aui-table-sortable-column" scope="col" data-yui3-col-id="name" title="Sort by Property Name" aria-labelledby="yui_3_9_0pr3_1_1372686463356_2200"><div class="aui-table-sort-liner" tabindex="0" unselectable="on">Property Name<span class="aui-table-sort-indicator"></span></div></th><th id="yui_3_9_0pr3_1_1372686463356_2201" colspan="1" rowspan="1" class="aui-table-header aui-table-col-value aui-table-sortable-column" scope="col" data-yui3-col-id="value" title="Sort by Value" aria-labelledby="yui_3_9_0pr3_1_1372686463356_2201"><div class="aui-table-sort-liner" tabindex="0" unselectable="on">Value<span class="aui-table-sort-indicator"></span></div></th></tr></thead><tbody class="aui-table-data" id="yui_3_9_0pr3_1_1372686463356_2486"><tr id="yui_3_9_0pr3_1_1372686463356_3688" data-yui3-record="model_11" class="aui-table-even "><td class="aui-table-col-name  aui-table-cell ">Name</td><td class="aui-table-col-value  aui-table-cell ">2</td></tr></tbody></table></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_2388" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn">Close</button></div></div></div></div></div><div class="aui-diagram-builder-content-container" id="yui_3_9_0pr3_1_1372686463356_1249"><div tabindex="1" class="aui-diagram-builder-canvas" id="yui_3_9_0pr3_1_1372686463356_1248"><div class="aui-diagram-builder-drop-container yui3-dd-drop" id="yui_3_9_0pr3_1_1372686463356_191"><div id="yui_3_9_0pr3_1_1372686463356_740" class="aui-diagram-node-start yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_Start" style="height: 40px; width: 40px; left: 151px; top: 213px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_742" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_971"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 40px; height: 40px;" id="yui_3_9_0pr3_1_1372686463356_970"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_827" width="49" height="49" viewBox="-7 -7 49 49" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 49px; height: 49px;"><svg:circle id="yui_3_9_0pr3_1_1372686463356_833" pointer-events="visiblePainted" r="15" cx="15" cy="15" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,5,5)" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle aui-diagram-node-shape-boundary"></svg:circle></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_2144">Start</div><div class="aui-diagram-builder-controls" id="yui_3_9_0pr3_1_1372686463356_2776"><div id="yui_3_9_0pr3_1_1372686463356_932" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn yui3-widget aui-btn-content" id="yui_3_9_0pr3_1_1372686463356_2775"><i class="aui-icon-remove"></i>  </button></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_989" class="aui-diagram-node-task yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_Task" style="height: 70px; width: 70px; left: 355px; top: 202px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_991" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_1205"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 70px; height: 70px;" id="yui_3_9_0pr3_1_1372686463356_1204"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_1064" width="77" height="77" viewBox="-7 -7 77 77" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 77px; height: 77px;"><svg:rect id="yui_3_9_0pr3_1_1372686463356_1070" pointer-events="visiblePainted" width="55" height="55" x="0" y="0" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,8,8)" style="left: 0px; top: 0px;" class="yui3-shape yui3-svgShape yui3-rect yui3-svgRect aui-diagram-node-shape-boundary"></svg:rect></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_1206">Task</div><div class="aui-diagram-builder-controls" id="yui_3_9_0pr3_1_1372686463356_1207"><div id="yui_3_9_0pr3_1_1372686463356_1169" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn yui3-widget aui-btn-content" id="yui_3_9_0pr3_1_1372686463356_1208"><i class="aui-icon-remove"></i>  </button></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_1270" class="aui-diagram-node-end yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_End" style="height: 40px; width: 40px; left: 566px; top: 214px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_1272" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_1486"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 40px; height: 40px;" id="yui_3_9_0pr3_1_1372686463356_1485"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_1345" width="49" height="49" viewBox="-7 -7 49 49" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 49px; height: 49px;"><svg:circle id="yui_3_9_0pr3_1_1372686463356_1351" pointer-events="visiblePainted" r="15" cx="15" cy="15" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,5,5)" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle aui-diagram-node-shape-boundary"></svg:circle></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_2755">End</div><div class="aui-diagram-builder-controls"><div id="yui_3_9_0pr3_1_1372686463356_1450" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn"><i class="aui-icon-remove"></i> </button></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 1019px; height: 600px;" id="yui_3_9_0pr3_1_1372686463356_3872"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_202" style="position: absolute; top: -7px; left: -298px; overflow: auto; visibility: visible; width: 888px; height: 266px;" width="888" height="266" viewBox="-298 -7 888 266"><svg:path id="yui_3_9_0pr3_1_1372686463356_669" pointer-events="visiblePainted" width="569" height="241" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: hidden;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M402, 237C487,237 487, 241 572, 241"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_671" pointer-events="visiblePainted" width="572.9999934834163" height="246.93858848751862" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: hidden;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M572, 241 M555.0217716335618, 234.93866668652237 L559.0000847155875, 240.95306815478037, 554.9784499302822, 246.93858848751862, 572.9999934834163, 241.00361014194, 555.0217716335618, 234.93866668652237z"></svg:path><svg:circle id="yui_3_9_0pr3_1_1372686463356_831" pointer-events="visiblePainted" r="12" cx="344" cy="237" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:circle id="yui_3_9_0pr3_1_1372686463356_1068" pointer-events="visiblePainted" r="12" cx="572" cy="241" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:circle id="yui_3_9_0pr3_1_1372686463356_1349" pointer-events="visiblePainted" r="12" cx="12" cy="12" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:path id="yui_3_9_0pr3_1_1372686463356_1770" pointer-events="visiblePainted" width="341" height="234" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M186, 233C273.5,233 273.5, 232 361, 232"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_1772" pointer-events="visiblePainted" width="344.99999952849356" height="239.98348866894088" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M361, 232 M343.99474600913277, 226.01490712636024 L348.00000499653675, 232.0113978037331, 344.00526705873256, 238.0149025141725, 361.99999961565106, 231.99912324586668, 343.99474600913277, 226.01490712636024z"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_2113" pointer-events="visiblePainted" width="566.1" height="239" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M421, 232C496,232 496, 232 571, 232"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_2115" pointer-events="visiblePainted" width="570" height="245" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M571, 232 M554, 226 L558, 232, 554, 238, 572, 232, 554, 226z"></svg:path></svg:svg></div><span class="aui-diagram-builder-connector-name aui-unselectable aui-hide">connector655</span><span class="aui-diagram-builder-connector-name aui-unselectable" style="left: 266.5px; top: 221px;" id="yui_3_9_0pr3_1_1372686463356_3438">1</span><span class="aui-diagram-builder-connector-name aui-unselectable" style="left: 488.5px; top: 221px;" id="yui_3_9_0pr3_1_1372686463356_3655">2</span></div></div></div>
    </div>

看着这个，我真的无法理解它的任何意义。我在 YUI3 中找不到与此相关的任何内容和 AUI文档。

所以问题是我如何从 AUI digram 中获取信息(例如节点、连接和可能的位置)？

Answer 1

您可以在DiagramBuilder中使用.toJSON方法