Question

我正在尝试构建一个图形（使用d3.js），每个刻度线有两个条形。

我不确定哪种结构最适合处理数据，我尝试过这样的事情：

var dataset = [
    {
        'month': 'Jan',
        'count': {
            'red': 29,
            'white': 32
        }
    },
    {
        'month': 'Feb',
        'count': {
            'red': 23,
            'white': 42
        }
    },
    {
        'month': 'Mar',
        'count': {
            'red': 34,
            'white': 47
        }
    }
];

我怎样才能获得每一个的条形图？

我试过这个

function red(d, i) { return d[i]['red']; }

chart.selectAll('rect')
    .data(dataset, red)
   .enter().append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', 20)
    .attr('height', 100);

（不要介意我使用的是x，y，宽度和高度的固定值。这只是一个例子。）

Answer 1

您可以尝试将每对条形图放在g元素中。像这样：

var groups = chart.selectAll('g')
    .data(dataset)
  .enter().append('g');

var reds = groups.append('rect')
    .datum(function(d) { return d.count.red; })
    .attr('class', 'red');

var whites = groups.append('rect')
    .datum(function(d) { return d.count.white; })
    .attr('class', 'white');

如何获取json数据中每个条的值？

1 个答案: