Question

查看sample：

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d) { return d; });

无法帮助但想知道如何使附加信息对所提供的数据敏感 - 比如说do append and fill text有一些谓词说if d == 8其他人不附加？

Answer 1

最简单的方法是在调用.data( ... )之前过滤您的数组：

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42].filter(function(d){ return d < 10; }))
  .enter().append("div")
    .text(function(d) { return d; });

将仅为4和8创建一个div。

或者，您可以在将数组绑定到页面上的元素之后过滤您的选择，以有条件地创建子元素：

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d) { return d; })
 .filter(function(d){ return d == 8; }).append("span")
    .text("Equal to 8")

如何根据D3中的数据创建元素？

1 个答案: