D3 将元素绑定到数据点/数据值

Question

我想我在数据绑定中缺少一些概念。我没有实际数据，但假设数据如下所示：

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 中不常见，那么你介意让我知道制作或/并将元素绑定到数据值的自然方法是什么？

谢谢

Answer 1

像这样的东西？

自己填写属性回调。

也许你需要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 ****; });