Question

使用d3，我正在尝试编写一个脚本，通过显示由单个块组成的数字来显示数字的大小。所以数字5将由5个矩形组成。在svg中创建矩形的一般语法如下。

var p = d3.select("body").selectAll("p")
    .data([5, 3, 10])
    .enter()
    .append("rect) 
    ...

然而，我真正想要的是每个数据元素附加多个矩形的东西。

var p = d3.select("body").selectAll("p")
    .data([5, 3, 10])
    .enter()
    .do(CreatedRectangles(d))

任何人都知道如何轻松地做到这一点？

Answer 1

您可以使用nested selection和d3.range()：

d3.select("body")
  .selectAll("p")
  .data([5,3,10])
  .enter()
  .append("p")
  .selectAll("p")
  .data(function(d) { return d3.range(d); })
  .enter()
  .append("p")
  .html(String);

演示here。

您也可以使用.do()，但它被称为.each()。 CreateRectangle()看起来像这样。

function CreateRectangle(d) {
  d3.select(this).selectAll("p").data(d3.range(d)).enter().append("p").html(String);
}

它与SVG和rect元素的工作方式类似。

在d3中为每个数据元素添加多个Rect

1 个答案: