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中。该块运行但不附加任何内容。有什么问题？

此外，我对此部分有点挣扎，

<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>

...你必须打破选择，否则你最终会得到一个div的 matryoshka娃娃（div内div的div ...）。

这是代码，请注意innerDiv1和innerDiv2：

＆＃13;

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())

＆＃13;

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

＆＃13;

点击＆＃34;运行代码段＆＃34;并在浏览器中检查控制台（这将扩展元素），而不是Stack片段结果。

D3.js不附加HTML

1 个答案: