d3.js - D3 積み上げ棒グラフ: 各行に固有の棒 (1 行のみ積み上げ)

Question

私は D3 を初めて使用し、データセット内の各行 (各観測値) に固有のバーを持つ積み上げ棒グラフ (または縦棒グラフ) を作成しようとしています。

私が遭遇した問題は次のとおりです。y軸に同じ値が使用されている行が複数ある場合（私の場合、data.csvの列「seq」に「3」と「4」が2回表示されます）、次に、（異なる行からの）同じ名前のすべてのデータが次のように積み上げられます。

データ.csv

seq,Idle Time,Answer Time
2,95,4
1,0,3
3,22,3
4,0,4
6,43,3
5,0,2
8,30,1
7,0,3
4,20,5
3,0,8

しかし、私がやろうとしているのは、d.seq の値が同じであるにもかかわらず、各行に 1 つのバーを作成することです (d.seq=3 と d.seq=4 に 2 つのバーがあるように)。

私が今取り組んでいる完全なコードはここにあります

どんな提案でも大歓迎です、ありがとう！

score 0 · Accepted Answer

「seq」値ではなく、データ配列のインデックスに基づいてプロットできます。インデックスは一意になります。http://plnkr.co/edit/vtsfWSB7etegM9VfI6mM?p=preview

2行だけ更新しました

86行目:

y.domain(data.map(function(d, i) { return i; }));

112行目:

.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

y-tick ラベルに「seq」の値を表示させたい場合は、軸の詳細とカスタムラベルの適用方法を確認できるこちらをご覧ください: https://github.com/mbostock/d3/wiki /SVG-軸

編集

d3.csv 成功関数内で yAxis 定義を移動し、次のようにデータ配列を参照して、希望どおりに軸にラベルを付ける必要があります。

var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(function(i) {return data[i].seq; })
    .orient("left");

1 に答える 1