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/>'));

我希望原始HTML中“ somestring的D3文本替换为'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>

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

1 个答案: