javascript - d3js 来自单个数组元素的图表中的多个条形

Question

This fiddle pretty much explains what I'm trying to accomplish.

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

基本上，我有代表团队一周得分的 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

我似乎无法理解如何使用数组中的单个元素执行 .data(games).enter().append() 来输出每个团队的得分，因为我“认为”我只能输出一个条目对于每个数组元素。

如果我生成自己的数组，我就可以做到这一点，这不是问题(请参阅 fiddle )，但这是处理这种情况的最佳、最简单的方法吗？

再次:here is the fiddle link

Answer 1

一个常见的“技巧”是保存.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; 
  });

完整示例 here .