Adding labels to both ends of <rect> in a bar chart

Question

I'm using D3 to present some data as a horizontal bar chart. Values will typically range between -10 and +10 on 8 different scales. I have the bars rendering as I want, but I can't work out how to add lables for each of the extreems of the axes.

so far I have:

but I want to achieve something like:

In other words a label for each extreme of each scale. I have found lots of examples that add data labels to the bars them selves (e.g. the value), but I want to some how force the array of strings to be rendered at the extremes of the container.

At the moment, I am rendering the data from an array, and I have the labels stored in 2 other arrays e.g.

var data = [10, 5, -5, -10, 2, -2, 8, -8];
var leftLabels = ["label 1","label 2", ...];
var rightLabels = ["label 1", "label 2", ...];

Any ideas or links to examples most welcome.

Answer 1

It's funny, just by asking the q on SE I find it helps me reformulate the problem.. and then some time later a new try yields a result. Anyone else find that?

I managed to make it work by changing the way the SVG was created. So I now have the following structure:

<SVG>
><g> (one for each bar)
>><text>
>><rect>
>><text>
><other stuff like axies>

It turns out that <text> elements cannot be added to <rect> elements (well they can, be added but they won't render).

the code is:

var data = [10,2,4,-10,...etc...];

var leftLabels = ["left 1","left 1", ...etc...];

var rightLabels = ["right 1","right 2", ...etc...];

//chart dimentions
var margin = { top: 20, right: 30, bottom: 40, left: 30 },
    width = 600 - margin.left - margin.right,
    barHeight = 30,
    height = barHeight * data.length;

//chart bar scaling
var x = d3.scale.linear()
.range([100, width-100]);

var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0.1);

var chart = d3.select(".chartsvg")
.attr("width", width + margin.left + margin.right)
.attr("height", barHeight * data.length + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

x.domain([d3.min(data), d3.max(data)]);

//append a g for each data item 
var bar = chart.selectAll(".bar")
  .data(data)
  .enter()
  .append("g");

//in each bar add a rect for the bar chart bar
bar.append("rect")
  .attr("class", function (d) { return "bar--" + (d < 0 ? "negative" : "positive"); })
  .attr("x", function (d) { return x(Math.min(0, d)); })
  .attr("y", function (d, i) { return i* barHeight; })
  .attr("width", function (d) { return Math.abs(x(d) - x(0)); })
  .attr("height", barHeight-1);

//append the labels to each g using the label data
bar.append("text")
    .data(rightLabels)
    .attr("x", width)
    .attr("y", function (d, i) { return (i * barHeight)+barHeight/2; })
    .attr("dy", ".5em")
    .attr("fill","steelblue")
    .attr("text-anchor","end")
    .text(function (d) { return d; });

bar.append("text")
    .data(leftLabels)
    .attr("x", 0)
    .attr("y", function (d, i) { return (i * barHeight) + barHeight / 2; })
    .attr("dy", ".5em")
    .attr("fill","darkorange")
    .attr("text-anchor", "start")
    .text(function (d) { return d; });
//then append axis etc...

Formatting: something else to note. It turns out that to color the text in the label you need to use "stroke" and "fill" attributes. These are broadly equiv to the HTML "color" attribute on text.

Answer 2

I am not an expert in d3.js, but I think this can be easily done. There are different ways to go about it. I have created a pen for your use case.

I will paste the important part of the code below. In your chart, you will have to certainly make some adjustments to suit your needs. Feel free to play around with the values until you feel they are stable.

// Your array containing labels for left and right values

var leftSideData = ["left1", "left2", "left3", "left4", "left5", "left6", "left7", "left8"];

var rightSideData = ["right1", "right2", "right3", "right4", "right5", "right6", "right7", "right8"];

var left = svg.selectAll(".leftData")
    .data(leftSideData)
    .enter().append("g")
    .attr("class", "leftVal")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 57 + ")";
    });

  left.append("text")
    .attr("x", 0)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) {
      return d;
    });

  var right = svg.selectAll(".rightData")
    .data(rightSideData)
    .enter().append("g")
    .attr("class", "rightVal")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 57 + ")";
    });

  right.append("text")
    .attr("x", width + 30)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) {
      return d;
    });

I won't say this is perfect, but I hope you get an idea about how to approach it. All the best!!