javascript - Displaying labels on horizontal chart with d3.js -

javascript - Displaying labels on horizontal chart with d3.js -

i'm creating simple chart d3.js using next code. suppose var info formatted (ex. "[20,15,15,40,10]"), horizontal chart displays i'd add together labels on left , i'm bit overwhelmed d3.js . trying insert div containing label before every other div representing , showing data, can't understand how or if that's proper way. result should like:

label 1 |=============================40%==|

label 2 |=================30%==|

label 3 |======15%==|

and on. bars display fine, how add together labels on left ? piece of script displays bars (given div id 'chart' , proper css).

chart = d3.select('#chart') .append('div').attr('class', 'chart') .selectall('div') .data(data).enter() .append('div') .transition().ease('elastic') .style('width', function(d) { homecoming d + '%'; }) .text(function(d) { homecoming d + '%'; });

you'll find working illustration here . so, how add together labels on left of every bar user knows every bar represents ?

i think thought of appending <div> containing label before each bar reasonable. so, first need append <div> each bar, append <div> containing label, , append <div> containing bars. i've updated illustration jsfiddle here, javascript code below (some changes required css):

// add together div containing whole chart var chart = d3.select('#chart').append('div').attr('class', 'chart'); // add together 1 div per bar grouping both labels , bars var g = chart.selectall('div') .data([52,15,9,3,3,2,2,2,1,1]).enter() .append('div') // add together labels g.append("div") .style("display", "inline") .text(function(d, i){ homecoming "label" + i; }); // add together bars var bars = g.append("div") .attr("class", "rect") .text(function(d) { homecoming d + '%'; }); // execute transition show bars bars.transition() .ease('elastic') .style('width', function(d) { homecoming d + '%'; })

screenshot of jsfiddle output

javascript html css d3.js