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

【问题标题】：d3 bind element to data points / data valuesd3 将元素绑定到数据点/数据值
【发布时间】：2019-02-05 09:08:25
【问题描述】：

我认为我在数据绑定中遗漏了一些概念。我没有实际数据，但假设数据如下所示：

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 条等。

我认为它可能需要迭代才能在理论上产生与 rect 一样多的值，但无法找到如何在技术上实现它。谁能告诉我？

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

谢谢，

【问题讨论】：

标签： javascript d3.js data-binding element

【解决方案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 ****; });

【讨论】：