0

目盛りごとに 2 つのバーを持つグラフ (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、幅、高さに固定値を使用していることは気にしないでください。これは単なる例です。)

4

1 に答える 1

0

バーの各ペアを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');
于 2013-10-24T15:25:24.257 に答える