javascript - 将 d3 文本附加到现有 html div

Question

我在 html 中有一个看起来像这样的 div

<div class="newfield col-sm-4">
            <h2>42</h2>
            <h3>Appending above</h3>
</div>

D3(v4) 中的代码看起来像

var word = "somestring";
d3.select('.newfield')
.append("h2")
.html(word.join('<br/>'));

我希望 D3 文本“somestring”取代原始 html 中的“42”。

所以最终结果将如下所示

<div class="newfield col-sm-4">
            <h2>somestring</h2>
            <h3>Appending above</h3>
</div>

我当前的 D3 代码没有向屏幕添加任何内容。我的脚本按此顺序导入

<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="js/customd3.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

我会用普通的 Javascript 来完成这样的任务，而不涉及外部库。

但是如果必须使用 D3 来完成:

d3.selectAll('.newfield h2')
  .text("somestring")
  //.append("br") //not really necessary!

<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="newfield col-sm-4">
  <h2>42</h2>
  <h3>Appending above</h3>
</div>