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

Question

所有:

例如,我有一个字符串数组:

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

我想将它们全部添加到div中,
并将它们分开:

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

我想知道如何用D3做到这一点？我在想使用selectAll()... data()... enter().append(),但我不知道如何追加它.

谢谢

Answer 1

数据绑定d3是关于将数据附加到数据中每个项目的dom.但是,您要求的是如何通过以下方式将我的字符串分隔为一个元素<br/>:

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

d3获得相同外观的更多方法是(但这会为每个字符串提供一个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');

以下是两种方法的示例.