如何将文本附加到 D3 中的 div答案

【问题标题】：How to append text to a div in D3如何将文本附加到 D3 中的 div
【发布时间】：2015-05-28 23:11:10
【问题描述】：

全部：

例如我有一个字符串数组：

["string1","string2","string3","string4","string5"]

我想将它们全部添加到一个 div 中，
将它们分开，例如：

<div>
string1<br>
string2<br>
string3<br>
string4<br>
string5
</div>

我想知道如何用 D3 做到这一点？我正在考虑使用 selectAll()...data()...enter().append()，但我不知道如何附加它。

谢谢

【问题讨论】：

标签： javascript html d3.js

【解决方案1】：

d3 中的数据绑定是关于为数据中的每个项目附加一个元素到 dom。但是，您要的是如何获得一个元素，其字符串由 <br/> 分隔：

  var arr = ["string1","string2","string3","string4","string5"];
  d3.select('body')
    .append('div')
    .html(arr.join('<br/>'));

获得相同外观的更多d3ish 方法是（但这会为每个字符串提供一个 div）：

  var arr = ["string1","string2","string3","string4","string5"];

  d3.select('body')
    .selectAll('div')
    .data(arr)
    .enter()
    .append('div')
    .text(function(d){
      return d;
    });

第三种方法是使用<span>s：

d3.select('body')
    .selectAll('span')
    .data(arr)
    .enter()
    .append('span')
    .text(function(d){
      return d;
    })
    .append('br');

这是一个example 两种方法。

【讨论】：

谢谢，所以这意味着我不能使用 D3 直接将文本附加到一个元素？
@Kuan，数据绑定都是关于每个数据的一个元素（或一组元素）。请参阅使用 <span> 的更新。

【解决方案2】：

您应该将Child 附加到 div；

试试这样的（这是纯 js ！！！）：

var myArray=["string1","string2","string3","string4","string5"];
var test = document.querySelector(".test")
myArray.forEach(function(x){
var textnode = document.createTextNode(x);
test.appendChild(textnode )
})

https://jsfiddle.net/maio/m3sqjjb3/

【讨论】：