Overlapping labels - d3fc-label-layout

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { border: 1px solid red; }
    
    rect { 
      fill: none;
      stroke: red;
    }
    
  </style>

// a strategy that combines simulated annealing with removal
    // of overlapping labels
    const strategy = fc.layoutGreedy().bounds({x: xyScale(50), y:0, width: 200, height: xyScale(100)});
        
    // create the layout that positions the labels
    const labels = fc.layoutLabel(strategy)
      .size((d, i, g) => {
        // measure the label and add the required padding
        const textSize = g[i].getElementsByTagName('text')[0].getBBox();
        return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
      })
      .position(d => [xyScale(50), xyScale(d.value)])
      .component(textLabel);
          
    const data = [
      {value: 31, emperor:'nero'},
      {value: 33, emperor:'augustus'},
      {value: 35, emperor:'trajan'},
      {value: 37, emperor:'claudius'},
      {value: 39, emperor:'tiberius'},
    ];
            
    // render!
    svg.datum(data)
      .call(labels);
 
  </script>
</body>

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

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.1

https://cdn.jsdelivr.net/npm/d3fc-label-layout@5.1.0/build/d3fc-label-layout.js