Alignment of text labels - 2

This is an example how to compute the position of text labels when the axis is rescaled. The text labels and the ticks of the axis are transitioned to the destination while satisfying:

that the labels do not vertically overlap with each other
that the labels stay vertically within a give frame
that the labels are transitioned left or right of the new element depending on the empty space

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    rect {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

rect.before {
        stroke: red;
    }

rect.after {
        stroke: orange;
    }

rect.final {
        stroke: green;
    }
</style>
<div>
    <button type="button" onclick="toggleTrans()">Toggle transition</button>
</div>
<svg width="960" height="600"></svg>

var categories = ["cat1", "cat2", "cat3", "cat4", "cat5", "cat6", "cat7", "cat8"];
var catSubset = ["cat1", "cat2", "cat3", "cat4", "cat5", "cat6", "cat7", "cat8"];
var toggle = true;

// set up basic SVG
var svg = d3.select("svg"),
    margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom;

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.append("rect")
    .attr("class", "frame")
    .attr("width", width)
    .attr("height", height);

var yScale = d3.scalePoint()
      .domain(categories) 
      .range([height, 40]); 
var axisLeft = d3.axisLeft(yScale);
var axisSelection = g.append("g")
      .attr("class", "axis left")
      .attr("transform", "translate(80, -20)")
      .call(axisLeft);

// generate sorted data 
var data = [];
var dataSubset = [];

for (var i=0; i<categories.length; i++) { data.push(20 + i* (height - 40)/(categories.length - 1));}
data.sort(function(a, b){return b - a});

// draw elements
drawElements(g, data);

function drawElements(sel, data){
    var gNew = sel.append("g")
        .attr("transform", "translate(80, 0)");

gNew1 = gNew.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "position")
        .attr("transform", function(d) {return "translate(100, " + d + ")";});
    
    gNew1.append("line")
        .style("stroke", "steelblue")
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", 100)
        .attr("y2", 0);
}

function updateElements(_gd){
    var data = _gd.ds;
    var xTrans = _gd.xStart;

var transition = d3.transition().duration(2000);

d3.selectAll("g.position")
        .data(data)
        .transition(transition)
        .attr("transform", function(d) {return "translate(" + xTrans + ", " + d + ")";});
}

function transitionAxisToLabels(elementsToLabel, catSubset, axis, height, width){
    var pData = getPositionData(elementsToLabel, catSubset, height, width);
    transitionAxis(pData, axis, catSubset);
}

function generateData() {
    // generate random but sorted data
    var data = [];
    var dataSubset = [];
    for (var i=0; i<8; i++) { data.push(Math.round(Math.random() * (height)));}
    data.sort(function(a, b){return b - a});

categories.forEach(function(d,i) {
        if (catSubset.indexOf(d) !== -1) { dataSubset.push(data[i]); }
    });

var xStartElement = Math.round(Math.random() * 200);

elementsToLabel = {};
    catSubset.forEach(function(d,i) {
        elementsToLabel[d] = {
            index: i,
            xLeft: xStartElement,
            xRight: xStartElement + 100,
            yDest: dataSubset[i],
            value: "12.5% " + d
        };
    });
    return {ds: dataSubset, xStart: xStartElement} ;
}

// transition labels
function transitionAxis(_pData,_axis, _catSubset) {
    var transition = d3.transition().duration(2000);
    var transitionEnd = d3.transition().duration(0);
    var ele = _pData[Object.keys(_pData)[0]]; // pick first element since x values are the same
    translateX = ele.xLabel; // x value of element - x translation of scale

sel.exit()
        .transition(transition)
        .style("opacity", 0);

_axis.selectAll("path.domain")
        .transition(transition)
        .style("opacity", 0);
}

// transition back
function transitionBack(_axis, _catSubset) {
    var transition = d3.transition().duration(2000);
    var sel = _axis.selectAll("g.tick").data(_catSubset, function(d){ return d;})
        .each(function(d,i){
            d3.select(this).selectAll("text")
                .text(function(d) {return d;})
                .transition(transition)
                .attr("transform", "translate(0, 0)")
                .style("font-size", "10px")
                .attr("dy", "0.32em");
            
            d3.select(this).selectAll("line")   
                .transition(transition)
                .attr("x1", 0)
                .attr("y1", 0.5)
                .attr("x2", -6)
                .attr("y2", 0.5)
                .attr("transform", "translate(0,0)");
        });

sel.exit()
        .transition(transition)
        .style("opacity", 1);

_axis.selectAll("path.domain")
        .transition(transition)
        .style("opacity", 1);    
}

// compute values for transition labels
function getPositionData(_elementsToLabel, _catSubset, height, width) {
    var labelSubset = [];
    var pData = {};

_catSubset.forEach(function(d) { pData[d] = {}; });
    for (var key in _elementsToLabel) {
        if (_elementsToLabel.hasOwnProperty(key)) {
            labelSubset.push(_elementsToLabel[key].yDest);
        }
    }
     
    pData.rect = getLabelSize(_elementsToLabel, 16);
    var xPos = getXPositions(_elementsToLabel, pData.rect, width);

// rest is cat specific
    pData.yPos = getYPositions(labelSubset, pData.rect.height, height);

_catSubset.forEach(function(d,i) {
        pData[d].xLabel = xPos.x;
        pData[d].labelLeft = xPos.labelLeft;
        pData[d].yLabel = pData.yPos[i];
        pData[d].yDest = labelSubset[i];
        pData[d].yTrans = pData[d].yDest - pData[d].yLabel;
        pData[d].value = _elementsToLabel[d].value;
    });
    pData.lineX1 = 0;
    pData.lineY1 = 0;

function getLabelSize(_elementsToLabel, fontSize) {
        var maxWidth = 0;
        var maxHeight = 0;

var dummy = d3.select("svg")
            .append("g")
            .attr("class", "dummy l1")
            .style("opacity", 0)
            .selectAll("text")
            .data(Object.keys(_elementsToLabel))
            .enter()
            .append("text")
            .style("font-size", fontSize + "px")
            .style("font-family", "sans-serif")
            .text(function(d) { return elementsToLabel[d].value; });

dummy.each(function (d) {
                var ele = d3.select(this).node();
                maxWidth = (ele.getBBox().width > maxWidth) ? ele.getBBox().width : maxWidth;
                maxHeight = (ele.getBBox().height > maxHeight) ? ele.getBBox().height : maxHeight;
                pData[d].textWidth = ele.getBBox().width + 18; // 2* (+ 6 (tick length) + 3 (space between tick and text))
            }); 
        d3.selectAll("g.dummy").remove();
        
        return { 
            width: maxWidth + 10, // add space for line 
            height: maxHeight + 10 // add space for better vertical separation
        };
    }

// returns object with x position for label transition destination
    function getXPositions(_elementsToLabel, rect, width) {
        var res = {};
        var ele = _elementsToLabel[Object.keys(_elementsToLabel)[0]]; // pick first element assuming x values are the same

if (rect.width < ele.xLeft) {
            res.x = ele.xLeft;
            res.labelLeft = true;
        } else {
            res.x = ele.xRight;
            res.labelLeft = false;
        }
        return res;
    }

// returns array of y positions for label transition destination without overlaps
    function getYPositions(data, rectHeight, height) { 
        var dataObject = createObject(data);
        dataObject = adjustBottoms(dataObject);
        var positionEnd = trimObject(dataObject);

if (positionEnd[positionEnd.length-1] < rectHeight/2) { // second pass if out of range
            dataObject = adjustTops(dataObject);
            positionEnd = trimObject(dataObject);
        }

https://d3js.org/d3.v4.min.js