D3.js棒グラフにラベルを追加

Question

棒グラフにラベルを追加するにはどうすればよいですか？棒グラフはx軸に沿って延びており、ラベルをy軸に沿って追加したいと考えています。

いくつかの例を読み、外部の.tsvファイルまたは.csvファイルを使用します。代わりにそれらを配列に格納することはできますか？私のコードは以下の通りです：

var data = [7, 8, 15, 16]; 
var label = ["as","bs","cs","ds"]; 

var width = 420, 
    barHeight = 20; 
var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, width]); 
var chart = d3.select(".chart") 
    .attr("width", width) 
    .attr("height", barHeight * data.length); 
var bar = chart.selectAll("g") 
    .data(data) 
    .enter().append("g") 
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 
bar.append("rect") 
    .attr("width", x) 
    .attr("height", barHeight - 1); 
bar.append("text") 
    .attr("x", function(d) { return x(d) - 3; }) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { return d; }); 

Answer 1

あなたはこのようにインデックスして、ラベルの値を取得できます。

bar.append("text") 
      .attr("x", function(d) { return x(d) - 3; }) 
      .attr("y", barHeight/2) 
      .attr("dy", ".35em") 
      .text(function(d, i) { return label[i]; });