この単純な複数の棒グラフに、次のような凡例を追加する必要があります。
縦棒グラフと同じように凡例を追加してみました。しかし、私はできませんでした。
jQuery(function($) {
var names = ['John', 'Tim', 'Sam', 'Greg', 'Charles'],
hotdogs = [8, 4, 9, 12, 11],
chart,
width = 400,
bar_height = 20,
height = bar_height * names.length;
var x, y;
x = d3.scale.linear()
.domain([0, d3.max(hotdogs)])
.range([0, width]);
y = d3.scale.ordinal()
.domain(hotdogs)
.rangeBands([0, height]);
var color = d3.scale.category10();
var left_width = 100;
var gap = 2;
y = d3.scale.ordinal()
.domain(hotdogs)
.rangeBands([0, (bar_height + 2 * gap) * names.length]);
chart = d3.select($("#step-5")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', left_width + width + 40)
.attr('height', (bar_height + gap * 2) * names.length + 30)
.append("g")
.attr("transform", "translate(10, 20)");
chart.selectAll("line")
.data(x.ticks(d3.max(hotdogs)))
.enter().append("line")
.attr("x1", function(d) { return x(d) + left_width; })
.attr("x2", function(d) { return x(d) + left_width; })
.attr("y1", 0)
.attr("y2", (bar_height + gap * 2) * names.length);
chart.selectAll("rect")
.data(hotdogs)
.enter().append("rect")
.attr("x", left_width)
.attr("y", function(d) { return y(d) + gap; })
.attr("width", x)
.attr("height", bar_height)
.style('fill', function(d) {
return color(d);
});
色とそれに含まれるデータを表す凡例を追加するにはどうすればよいですか? どんな助けでも大歓迎です。ありがとう