在d3中可视化数据计数

Question

我想在d3中可视化数据计数。我有一个类似的数据集：

[ { "name": "Team blue", "color": "#0433ff" "count": 9 }, { "name": "Team red", "color": "#ff2600" "count": 12 } ]

我希望将其可视化为：http://i.imgur.com/xjFeNYd.png

我理解数据的基础知识并输入（）但我不知道哪种是基于计数值创建红色或蓝色框的最佳方法。

任何帮助将不胜感激。

Answer 1

您可以d3.range(number)生成从1到number的一系列数字。然后，您可以将其与nested selections结合使用。代码如下所示：

block.selectAll("span")
  .data(function(d) { return d3.range(d.count); })
  .enter()
  .append('span')

完整演示（使用固定CSS）here。获取span元素的颜色的方式目前有点hacky，因为它索引到顶级数据集。更简洁的方法是将此数据作为d3.range()生成的元素的一部分，并留给读者练习。