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; });

我知道它为每个数据点（每个人）绑定条形图，并且该值将投影为条形图高度。

但是我想做的矩形和他们的销量一样多。例如，James 10 个 rects，Nancy 20 个 rects 等

我认为在理论上可能需要迭代价值才能产生尽可能多的矩形，但在技术上找不到如何制造它。谁能告诉我？

如果这种思维方式在 js/d3 中不常见，那么您介意让我知道什么是使 or/and 将元素绑定到数据值的自然方式吗？

谢谢，

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 ****; });

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

d3 bind element to data points / data values

javascript

data-binding

element

d3.js