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

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

您可以使用嵌套选择并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);

在这里演示.

您也可以使用.do()它,除非它被调用.each().CreateRectangle()看起来像这样.

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

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