Добавление нескольких прямоугольник на элемент данных в Д3

Question

Добавление нескольких прямоугольник на элемент данных в Д3

Используя 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))

Кто-нибудь знает, как это сделать легко?

549 1

javascript svg

1 ответ:

Comments

Ничего не найдено.

Lars Kotthoff · Accepted Answer · 2014-01-13 20:20:25

Можно использовать вложенный выбор и 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.