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（）因为我认为'我只能输出一个条目对于每个数组元素。

如果我生成自己的数组，我可以做到这一点，而不是问题（请参阅小提琴），但这是处理这种情况的最好，最糟糕的方法吗？

再次：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。

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

1 个答案: