d3 привязывает элемент к точкам данных / значениям данных - PullRequest
Новая
       7

d3 привязывает элемент к точкам данных / значениям данных

0 голосов
/ 30 августа 2018

Я думаю, что мне не хватает некоторых понятий в привязке данных. У меня нет фактических данных, но, скажем, данные выглядят так: 

name, value
James, 10
Nancy, 20
Amber, 30
Mike, 40
Julian, 50

Значение представляет продажи фруктов, например:)

Обычным способом визуализации может быть гистограмма. Код может выглядеть следующим образом - учитывая, что все остальные настройки, такие как svg и т. Д., Уже выполнены): 

svg.selectAll(rect)
    .data(data)
    .enter()
    .append(rect)
    .attr("x", function(d, i) { return i; })
    .attr("y", function(d) { return d.value; })
    .attr("width", 10)
    .attr("height", function(d) { return height - d.value; });

Насколько я понимаю, он связывает столбцы для каждой точки данных (каждого человека), и значение будет проецироваться как высота столбца.

Но я бы хотел сделать столько же прямоугольников, сколько их продажи . Например, 10 ректов для Джеймса, 20 ректоров для Нэнси и т. Д.

Я подумал, что может потребоваться итерация для значения, чтобы сделать столько же, сколько в теории, но не могу найти, как сделать это в технике. Кто-нибудь может дать мне знать?

Если этот способ мышления не распространен в js / d3, то не могли бы вы сообщить мне, каков естественный способ создания или / и привязки элементов к значениям данных?

Спасибо,

1 Ответ

0 голосов
/ 30 августа 2018

Как то так?

Заполните атрибуты обратного вызова самостоятельно.

Может быть, вам нужно d3.select(this.parentNode).datum()

var gbars = svg.selectAll("g.bar")
   .data(data)
   .enter()
   .attr("class", "bar");

gbars.selectAll("rect")
     .data(d => d3.range(d.value) )
     .enter()
     .append("rect")
     .attr("x", function(d, i) { return ****; })
     .attr("y", function(d, i) { return ****; })
     .attr("width", 10)
     .attr("height", function(d, i) { return ****; });
...