2

d3の棒グラフにサブカテゴリを含めることは可能ですか? すぐに使えるとは思いませんが、誰かがそれを行う方法を知っているかもしれません。例として、月ごとの製品 (A、B、C) の売上があります。

  =   =   
  =   =     = 
  = = =   = =
  = = =   = = =
+-+-+-+-+-+-+-+-+- ...
| A B C | A B C |  ...
|  Jan  |  Feb  |  ...

別のデータセットを棒グラフに追加する方法がわかりません。

4

1 に答える 1

2

グループ化されたグラフを生成する d3.js を示すグラフ

持っているデータの各セットを取り、それをリストに追加してから、データを転置します。

var dataA = [1, 2, 3, 4, 5];
var dataB = [5, 4, 3, 2, 1];
var dataC = [5, 4, 3, 4, 5];

var dataAll = [dataA, dataB, dataC];
var dataT = d3.transpose(dataAll);

D3.js では、これはそれほど難しくなくd3.transpose、データの転置が自動的に行われます。最も困難な部分は、読み取り/更新が容易な方法で行うことです。外部リストをgオブジェクトにバインドします。このグループに変換を使用して、リスト内の位置だけ右にシフトします。その後、個々rectの s を後で処理するときに、月の正しい位置を計算する必要はありません。これにより、ラベルがはるかに簡単になり、常に懸念事項が適切に分離されます。次に、内側のリストを にバインドしrect、少し色を追加して、上記のチャートを作成します。

var chart = d3.selectAll('#chartArea')
    .append('svg')

var month = chart.selectAll('g')
    .data(dataT)
    .enter()
        .append('g')
        .attr('transform', function(d,i){return 'translate(' + x(i) + ', 0)';});

month.selectAll('rect')
    .data(function (d) {return d;}) 
    .enter()
        .append('rect')
        .attr('x', function(d, i){return x(i/groups);})
        .attr('y', function(d){return h-y(d);})
        .attr('width', function(){return x(1/groups);})
        .attr('height', function(d){return y(d);})
        .attr('fill', function(d, i){return groupColor(i);})

実際の例は JSFiddle http://jsfiddle.net/hKvwa/にあります

于 2013-05-23T12:03:01.770 に答える