javascript - 如何在垂直选项卡内容框的 div 内显示 d3js 图表？

Question

我目前正在尝试在垂直选项卡菜单的内容框中显示我使用 d3.js 创建的折线图。图本身的 d3 代码可以在“普通”页面上工作，当我将代码放在选项卡内容框中时，甚至 d3 代码中的日志也可以工作，但图不会显示。内容框中的其他元素(例如图像或标题)工作正常。

这是我的代码的html部分

  <h1 id="testheading"> Test </h1>
  <div class="tab">
    <button class="tablinks" onclick="openArg(event,'Overview')"> Übersicht </button>
    <button class="tablinks" onclick="openArg(event,'JungAlt')"> Jung und Alt </button>
  </div>

  <div id="Overview" class="tabcontent">
    <div class="container">
        <div class="row">
            <div class="col">
                <div id="chart-area"></div>
            </div>
        </div>
    </div>
  </div>

  <div id="JungAlt" class="tabcontent">
    <h3>Jung und Alt</h3>
    <p>Kaufkraft ist sehr hoch</p>
  </div>

正如预期的那样，将正确记录用于图表的 csv 文件的内容。只是图表不会显示在内容框内

Answer 1

问题解决了。 d3.js 脚本和 JavaScript 代码在错误的位置初始化。