javascript - D3.js 不附加 HTML

Question

我正在尝试将下一个附加到我现有的 HTML 代码中:

<div id="bar-1" class="bar-main-container azure">
    <div class="wrap">
        <div class="bar-percentage" data-percentage="52"></div>
        <div class="bar-container">
            <div class="bar"></div>
        </div>
    </div>
</div>

为此我做了:

var stats = d3.select("#language_stats")
    .append("div").attr("class", "bar-main-container azure")
    .append("div").attr("class", "wrap")
    .append("div").attr("class", "bar-percentage").attr("data-percentage", "52")
    .append("div").attr("class", "bar-container")
    .append("div").attr("class", "bar");

在哪里

<div id="language_stats"></div>

但此代码不会附加到我的 HTML 中。该 block 运行但不附加任何内容。有什么问题？

另外，我对这部分有点纠结，

<div class="bar-percentage" data-percentage="52"></div>

在哪里关闭</div>和 data-percentage包括在内。

提前致谢!

Answer 1

因为这是您要重现的结构...

<div id="bar-1" class="bar-main-container azure">
    <div class="wrap">
        <div class="bar-percentage" data-percentage="52"></div>
        <div class="bar-container">
            <div class="bar"></div>
        </div>
    </div>
</div>

...您必须中断选择，否则您将得到一个 matryoshka 娃娃 的 div(div 内的 div 内的 div ...)。

这是代码，注意innerDiv1和innerDiv2:

var stats = d3.select("#language_stats")
  .append("div")
  .attr("class", "bar-main-container azure")
  .append("div")
  .attr("class", "wrap");

var innerDiv1 = stats.append("div")
  .attr("class", "bar-percentage")
  .attr("data-percentage", "52");

var innerDiv2 = stats.append("div")
  .attr("class", "bar-container")
  .append("div")
  .attr("class", "bar");

console.log(d3.select(".bar-main-container").node())

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="language_stats"></div>

单击“运行代码片段”并检查浏览器中的控制台(这将展开元素)，而不是 Stack 片段结果。