我正在使用＆＃34; GoJS＆＃34;库。
我喜欢带有标签的多图制作。
我做了以下
通过从左侧的调色板中拖放形状来绘制图表。 通过切换标签可以同时控制多个图表。
每次我更改标签时，都会使用＆＃34;去JS＆＃34;变化。
它似乎正常工作。此外，即使切换选项卡，现有图表也不会消失，可以在以后再次绘制。 我似乎已经完成了我想做的事情。 但是，如果在调试模式下检查它，您将看到以下错误。
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>
通过＆＃34;调用函数[swichTab（div）] onclick＆＃34;事件
// 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, {
...
}
通过联系＆＃34; GoJS＆＃34;我得到了答案。开发人员，但我不确定如何应用它。
///////////////////////////////////////////
由于您仍然没有向我们提供导致错误的代码，因此我们很难建议您应该做出更改。
我的猜测是你的代码是这样的：
var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);
但问题是＆＃34; myDiagramDiv＆＃34; 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", . . .);
///////////////////////////////////////////
你能帮我解决一下我的问题吗？
答案 0 :(得分：0)
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg style="background-color:powderblue;">
<g class="group">
<g class="Node" id="g1"></g>
<g class="Node" id="g2"></g>
<g class="Node" id="g3"></g>
<g class="Node" id="g4"></g>
</g>
</svg>答案 1 :(得分：0)
var olddiag = go.Diagram.fromDiv("myDiagramDiv");
if (olddiag) olddiag.div = null;
var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);
我确实使用此代码解决了我的问题。