如何使用tab同时绘制多个图表答案

【问题标题】：How to use tab to draw multiple diagrams at the same time如何使用tab同时绘制多个图表
【发布时间】：2018-04-26 04:40:35
【问题描述】：

我正在使用“GoJS”库。

我想用标签制作多图。

enter image description here

我做了以下

enter image description here

通过从左侧的调色板中拖放形状来绘制图表。可以通过切换标签同时控制多个图表。

enter image description here

每次我更改选项卡时，都使用了“Go JS”更改。

它似乎工作正常。此外，即使切换选项卡，现有图表也不会消失，以后可以再次绘制。我似乎已经完成了我想做的事情。但是，如果你在调试模式下检查它，你会看到如下错误。

enter image description here

无效的 div id； div 已经有一个与之关联的图表。 go-debug.js (32,15)

这是我的代码。

<div class="row">
            <div class="col-md-12">
                <div class="panel with-nav-tabs panel-default">
                    <div class="panel-heading">
                        <ul class="nav nav-tabs">
                            <!-- <li class="active"><a href="#mainProcedure" data-toggle="tab" onclick="switchTab('mainProcedure')">Main Procedure</a></li> -->
                            <li class="dropdown"><a href="#" data-toggle="dropdown">Main Procedure<span class="caret"></span></a>
                                <ul class="dropdown-menu" role="main">
                                    <li><a class='switchTab' href="#mainProcedure" data-toggle="tab" onclick="switchTab('mainProcedure')">main_default</a></li>
                                    <li><a class='switchTab' href="#main01" data-toggle="tab" onclick="switchTab('main01')">main_01</a></li>
                                    <li><a class='switchTab' href="#main02" data-toggle="tab" onclick="switchTab('main02')">main_02</a></li>
                                    <li><a class='switchTab' href="#main03" data-toggle="tab" onclick="switchTab('main03')">main_03</a></li>
                                    <li><a class='switchTab' href="#main04" data-toggle="tab" onclick="switchTab('main04')">main_04</a></li>
                                    <li><a class='switchTab' href="#main05" data-toggle="tab" onclick="switchTab('main05')">main_05</a></li>
                                </ul>
                            </li>
                            <li class="disabled" data-toggle="tooltip" data-placement="top" title="Not Ready yet"><a>State Transition Diagram</a></li>
                            <li class="disabled" data-toggle="tooltip" data-placement="top" title="Not Ready yet"><a>State Transition Procedure</a></li>
                            <li class="dropdown"><a href="#" data-toggle="dropdown">Subroutines<span class="caret"></span></a>
                                <ul class="dropdown-menu" role="sub">
                                    <li><a class='switchTab' href="#sub01" data-toggle="tab" onclick="switchTab('sub01')">run_08</a></li>
                                    <li><a class='switchTab' href="#sub02" data-toggle="tab" onclick="switchTab('sub02')">run_02</a></li>
                                    <li><a class='switchTab' href="#sub03" data-toggle="tab" onclick="switchTab('sub03')">allow_01</a></li>
                                    <li><a class='switchTab' href="#sub04" data-toggle="tab" onclick="switchTab('sub04')">system_01</a></li>
                                    <li><a class='switchTab' href="#sub05" data-toggle="tab" onclick="switchTab('sub05')">run_03</a></li>
                                    <li><a class='switchTab' href="#sub06" data-toggle="tab" onclick="switchTab('sub06')">allow_02</a></li>
                                    <li><a class='switchTab' href="#sub07" data-toggle="tab" onclick="switchTab('sub07')">loading_01</a></li>
                                    <li><a class='switchTab' href="#sub08" data-toggle="tab" onclick="switchTab('sub08')">base_56</a></li>
                                    <li><a class='switchTab' href="#sub09" data-toggle="tab" onclick="switchTab('sub09')">base_05</a></li>
                                    <li><a class='switchTab' href="#sub10" data-toggle="tab" onclick="switchTab('sub10')">export_01</a></li>
                                    <li><a class='switchTab' href="#sub11" data-toggle="tab" onclick="switchTab('sub11')">import_01</a></li>
                                    <li><a class='switchTab' href="#sub12" data-toggle="tab" onclick="switchTab('sub12')">catch_06</a></li>
                                    <li><a class='switchTab' href="#sub13" data-toggle="tab" onclick="switchTab('sub13')">catch_07</a></li>
                                    <li><a class='switchTab' href="#sub14" data-toggle="tab" onclick="switchTab('sub14')">overRun_03</a></li>
                                    <li><a class='switchTab' href="#sub15" data-toggle="tab" onclick="switchTab('sub15')">allow_22</a></li>
                                    <li><a class='switchTab' href="#sub16" data-toggle="tab" onclick="switchTab('sub16')">fail_00</a></li>
                                    <li><a class='switchTab' href="#sub17" data-toggle="tab" onclick="switchTab('sub17')">fail_03</a></li>
                                    <li><a class='switchTab' href="#sub18" data-toggle="tab" onclick="switchTab('sub18')">success_01</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div id="board" class="panel-body" style="height: 480px;">
                        <div class="tab-content" id="tab-list">
                            <div class="tab-pane fade in active" id="mainProcedure" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="main01" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="main02" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="main03" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="main04" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="main05" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="stateTransitionDiagram" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="stateTransitionProcedure" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub01" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub02" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub03" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub04" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub05" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub06" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub07" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub08" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub09" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub10" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub11" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub12" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub13" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub14" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub15" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub16" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub17" style="width: 1120px; height: 440px;"></div>
                            <div class="tab-pane fade" id="sub18" style="width: 1120px; height: 440px;"></div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

通过“onclick”事件调用函数[swichTab(div)]。

// tab-content  *** global variable ***
var conID = "";

// select tab
function switchTab(t) {

    var tabID = "tab_"+ t;

    conID = t;

    init();

}

然后它携带要在图表中使用的 div 的 id。

var diagram = gojs(go.Diagram, conID, {
   ...
}

我通过联系“GoJS”开发者得到了答案，但我不知道如何应用它。

////////////////////////////////////

由于您仍未向我们提供您正在执行的导致错误的代码，因此我们很难建议您应该进行哪些更改。

我的猜测是你的代码是这样的：

  var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);

但问题是“myDiagramDiv”HTMLDivElement 已经有一个 go.Diagram 与之关联——这会导致该错误。

一种解决方案不是创建新图表，而是仅使用现有图表。您可以通过调用获得该图表：

  var olddiagram = go.Diagram.fromDiv("myDiagramDiv");

另一种解决方案是将旧图表与 HTMLDivElement 解除关联：

  var olddiag = go.Diagram.fromDiv("myDiagramDiv");
  if (olddiag) olddiag.div = null;
  var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);

////////////////////////////////////

你能帮我解决我的问题吗？

【问题讨论】：

标签： javascript tabs diagram gojs

【解决方案1】：

var olddiag = go.Diagram.fromDiv("myDiagramDiv");
if (olddiag) olddiag.div = null;
var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);

我确实使用此代码来解决我的问题。

【讨论】：

请解释这在现有答案之上提供的额外见解，尤其是@WalterNorthwoods 的答案。您似乎已经复制了它并且仅通过替换（语法上但不是语义上from Div()的参数来更改。否则，您可以借此机会使您的答案明显优于...
欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案2】：

此代码使用您正在使用的标识符：

    var olddiag = go.Diagram.fromDiv(conID);
    if (olddiag) olddiag.div = null;
    var diagram = go.GraphObject.make(go.Diagram, conID, . . .);

如需更多解释，请阅读问题中斜线之间引用的我的回复。

【讨论】：

请补充一些细节。
虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
我在上面的原始问题中的斜线之间添加了一个解释。请注意，我的答案是与我最初给出的代码完全相同的代码，但现在将字符串文字替换为变量，我当时不知道，但在提问者给出的代码中提供。
@WalterNorthwoods 我怀疑您在原始问题中是否包含任何内容；假设您没有使用两个单独的帐户来执行此操作，我认为这需要一些详细的解释才能不被视为违反此处的规则。如果你确实在其中插入了那个奇怪的非问题部分，那么你的问题就很奇怪，因为缺乏信息而责备自己。
嗯，我想我知道这里发生了什么/正在发生什么，但是一些 cmets 来解释会非常有帮助。请解释。（我猜你是“GoJS 开发者”....）