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

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

最佳答案

我将使用纯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>