Javascript d3js从单个数组元素在图表中显示多个条形图

它显示了问题和建议的解决方案，但我想知道我的解决方案是否“正确”

基本上，我有一个JSON，它代表了一周的团队得分

games = [
    {
        hometeam : "scouts",
        homeTeamScore : "21",
        visitor : "sharks",
        visitorScore : "17"
    },
    {
        hometeam : "gators",
        homeTeamScore : "28",
        visitor : "wild cats",
        visitorScore : "24"
    }
]

如何制作一个条形图，其中每场比赛输出代表每支球队得分的两个条形图（数组中一个元素的两个条形图）？它看起来是这样的：

-----------------scouts 21
-----------sharks 17
-------------------gators 28
----------------wild cats 24

我似乎无法确定如何使用数组中的单个元素do.data（games）.enter（）.append（）输出每个团队的得分，因为我“认为”每个数组元素只能输出一个条目

如果我生成自己的数组，我就可以做到这一点，这不是一个问题（请参阅fiddle），但这是处理这种情况的最好、最明智的方法吗

同样：

一个常见的“技巧”是保存

.enter（）

选择并对其进行多次操作。这正是您想要的：

var divs = d3.select('.chart2')
  .selectAll('div')
  .data(data)
  .enter();

divs.insert('div')
  .attr("class", 'home')
  .style("width", function(d) {
      return d.hs * 10 + "px";
  })
  .text(function(d) { 
    return d.hnn + ' ' + d.hs; 
  });

divs.insert('div')
  .attr("class", 'visitor')
  .style("width", function(d) {
    return d.vs * 10 + "px";
  })
  .text(function(d) { 
    return d.vnn + ' ' + d.vs; 
  });

---

完整示例。

超级复制器完美！非常感谢你，拉尔斯。这是我没有想到的一个组合。