Displaying labels on horizontal chart with d3.js

Question

I'm creating a simple chart with d3.js using the following code. Now suppose the var data is properly formatted (ex. "[20,15,15,40,10]"), the horizontal chart displays properly but I'd like to add some labels on the left and I'm a bit overwhelmed by d3.js . I was trying to insert an extra div containing the label before every other div representing and showing the data, but I can't understand how or if that's the proper way. The result should look something like:

Label 1 |=============================40%==|

Label 2 |=================30%==|

Label 3 |======15%==|

and so on. The bars display just fine, but how do I add the labels on the left ? This is the piece of script that displays the bars (given a div with id 'chart' and the 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) { return d + '%'; })
                  .text(function(d) { return d + '%'; });

You'll find a working example here . So, how do I add labels on the left of every bar so that the user knows what every bar represents ?

mdml mdml · Accepted Answer · 2014-11-07T19:27:17

I think your idea of appending a <div> containing a label before each bar is reasonable. To do so, you first need to append a <div> for each bar, then append a <div> containing the label, and finally append a <div> containing the bars. I've updated your example with a JSFiddle here, with the Javascript code below (some changes were also required to the CSS):

// Add the div containing the whole chart
var chart = d3.select('#chart').append('div').attr('class', 'chart');

// Add one div per bar which will group together both labels and bars
var g = chart.selectAll('div')
                .data([52,15,9,3,3,2,2,2,1,1]).enter()
                .append('div')

// Add the labels
g.append("div")
    .style("display", "inline")
    .text(function(d, i){ return "Label" + i; });

// Add the bars
var bars = g.append("div")
    .attr("class", "rect")
    .text(function(d) { return d + '%'; });

// Execute the transition to show the bars
bars.transition()
    .ease('elastic')
    .style('width', function(d) { return d + '%'; })

Screenshot of JSFiddle output

screenshot of bar chart with labels

Displaying labels on horizontal chart with d3.js

1 Answers