막대에 맞춤 라벨을 설정하는 방법은 무엇입니까?

차트의 Yes 및 No 라벨을 아래의 스냅 샷과 같이 어떻게 설정합니까?막대에 맞춤 라벨을 설정하는 방법은 무엇입니까?

enter image description here

D3 번호 :

var data = [ 
    { 
     "episode": "Ep. 01", 
     "yes": "60", 
     "no": "40" 
    }, 
    { 
     "episode": "Ep. 02", 
     "yes": "70", 
     "no": "30" 
    }, 
    { 
     "episode": "Ep. 03", 
     "yes": "50", 
     "no": "50" 
    }, 
    { 
     "episode": "Ep. 04", 
     "yes": "90", 
     "no": "10" 
    }, 
    { 
     "episode": "Ep. 05", 
     "yes": "30", 
     "no": "70" 
    }, 
    { 
     "episode": "Ep. 06", 
     "yes": "60", 
     "no": "40" 
    }, 
    { 
     "episode": "Ep. 07", 
     "yes": "70", 
     "no": "30" 
    }, 
    { 
     "episode": "Ep. 08", 
     "yes": "50", 
     "no": "50" 
    }, 
    { 
     "episode": "Ep. 09", 
     "yes": "90", 
     "no": "10" 
    }, 
    { 
     "episode": "Ep. 10", 
     "yes": "30", 
     "no": "70" 
    } 
]; 

var margin = {top: 20, right: 100, bottom: 30, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
.rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
.rangeRound([height, 0]); 

var color = d3.scale.ordinal() 
.range(["#B4D92A", "#FF3332"]); 

var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom"); 

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left") 
.tickFormat(d3.format(".0%")); 

var svg = d3.select("body").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

//d3.csv("data.csv", function(error, data) { 
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "episode"; })); 

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; }); 
}); 

//data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; }); 

x.domain(data.map(function(d) { return d.episode; })); 

svg.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(xAxis); 

svg.selectAll(".ellipse") 
.data(data) 
.enter() 
.append("ellipse") 
.attr("cx", function(d) { return x(d.episode) + 14; }) 
.attr("cy", function(d) { return y(0); }) 
.attr("rx", 18) 
.attr("ry", 5) 
.style("fill", "#728220"); 

var episode = svg.selectAll(".episode") 
.data(data) 
.enter().append("g") 
.attr("class", "episode") 
.attr("transform", function(d) { return "translate(" + x(d.episode) + ",0)"; }); 

episode.selectAll("rect") 
.data(function(d) { return d.ages; }) 
.enter().append("rect") 
.attr("width", x.rangeBand() - 15) 
.attr("y", function(d) { return y(d.y1); }) 
.attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
.style("fill", function(d) { return color(d.name); }) 
/*.attr("rx", 5) 
.attr("ry", 5);*/ 

var legend = svg.select(".episode:last-child").selectAll(".legend") 
.data(function(d) { return d.ages; }) 
.enter().append("g") 
.attr("class", "legend") 
.attr("transform", function(d) { return "translate(" + x.rangeBand()/2 + "," + y((d.y0 + d.y1)/2) + ")"; }); 

legend.append("line") 
.attr("x2", 10); 

legend.append("text") 
.attr("x", 13) 
.attr("dy", ".35em") 
.text(function(d) { return d.name; }); 

//});

jsFiddle

출처

2014-02-19 Rahul Desai