在d3中为每个数据元素添加多个Rect [英] Adding Multiple Rect per data element in d3

问题描述

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

Using d3, I am trying to write a script to visualize the size of a number by showing it composed of individual blocks . So the number 5 would be composed of 5 rectangle. The general syntax to create rectangles within the svg is something as follows.

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

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

However, what I really want is something that append multiple rectangles per data element.

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

任何人都很容易这样做？

Anyone know how to do this easily?

推荐答案

您可以使用嵌套选择< a>和 d3.range（） for this：

You can use a nested selection and d3.range() for this:

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（）看起来像这样。

You can use your .do() as well, except that it's called .each(). CreateRectangle() would look something like this.

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

它与SVG和 rect类似。元素。

这篇关于在d3中为每个数据元素添加多个Rect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！