Conditionally position labels on y axis - d3.js

Question

I have a horizontal bar graph with positive and negative values. I would like to position the labels on the y axis to the left of the axis when the value is positive and to the right of the axis when the value is negative.
{value: -70, dataset:"foo"},
{value: -20, dataset:"bar"},
{value: 30, dataset:"baz"}
etc...
The value of the first bar is negative and the label foo is on the right side of the axis, which is where I want it. But the value of the third bar is positive, so I would like to see that label on the left of the y axis. Is this possible?
Here is the JSFiddle: https://jsfiddle.net/Kavitha_2817/fmr1x1gu/18/

Answer 1

A simple solution (out of many) is calling two axis generators, axisLeft and axisRight, and formatting the ticks according to the dataset values:
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x(0) + ",0)")
.call(d3.axisRight(y).tickFormat(function(d) {
var value = data.filter(function(e) {
return e.dataset === d
})[0].value;
return value > 0 ? null : d;
}));
svg.append("g")
.attr("class", "y axis left")
.attr("transform", "translate(" + x(0) + ",0)")
.call(d3.axisLeft(y).tickFormat(function(d) {
var value = data.filter(function(e) {
return e.dataset === d
})[0].value;
return value < 0 ? null : d;
}));
Here is a demo:
var margin = {
top: 30,
right: 10,
bottom: 50,
left: 50
},
width = 500,
height = 300;
var data = [{
value: -10,
dataset: "barbaz"
}, {
value: 40,
dataset: "barbar"
}, {
value: -10,
dataset: "foobaz"
}, {
value: -50,
dataset: "foobar"
}, {
value: 30,
dataset: "baz"
}, {
value: -20,
dataset: "bar"
}, {
value: -70,
dataset: "foo"
}];
// Add svg to
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 + ')');
// set the ranges
var y = d3.scaleBand()
.range([height, 0])
.padding(0.1);
var x = d3.scaleLinear()
.range([0, width]);
// Scale the range of the data in the domains
x.domain(d3.extent(data, function(d) {
return d.value;
}));
y.domain(data.map(function(d) {
return d.dataset;
}));
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function(d) {
return "bar bar--" + (d.value < 0 ? "negative" : "positive");
})
.attr("x", function(d) {
return x(Math.min(0, d.value));
})
.attr("y", function(d) {
return y(d.dataset);
})
.attr("width", function(d) {
return Math.abs(x(d.value) - x(0));
})
.attr("height", y.bandwidth());
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x(0) + ",0)")
.call(d3.axisRight(y).tickFormat(function(d) {
var value = data.filter(function(e) {
return e.dataset === d
})[0].value;
return value > 0 ? null : d;
}));
svg.append("g")
.attr("class", "y axis left")
.attr("transform", "translate(" + x(0) + ",0)")
.call(d3.axisLeft(y).tickFormat(function(d) {
var value = data.filter(function(e) {
return e.dataset === d
})[0].value;
return value < 0 ? null : d;
}));
.bar--positive {
fill: steelblue;
}
.bar--negative {
fill: darkorange;
}
.y.axis.left {
fill: none;
stroke: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>