Beeswarm + maintain x-position of nodes

This block is a continuation of a previous one. The main difference resides in the version of D3 (eg. v3.5 VS v4-beta).

I was not totally satisfied of my previous block because nodes could overlap, making hovering of individual nodes possibly tedious. With the new/future release of D3 v4, this can be handled easily with the colision detection feature embeded in the new version of the force layout.

By the way, there is still some overlapping. Playing with forces' strength and/or radius/distance may help ...

Acknowledgments to:

D3.js (v4-beta)
blockbuilder.org
This block is a continuation of a previous one

<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle {
  stroke-width: 1.5px;
}

line {
  stroke: #999;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
<script>

var width = 960,
    height = 500,
    radius = 4;

var fill = d3.scaleLinear().domain([1,150]).range(['lightgreen', 'pink']);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
	
  svg.append("line")
  	.attr("x1", 0)
  	.attr("y1", height/2)
    .attr("x2", width)
    .attr("y2", height/2)
  	.style("stroke", "lightgrey");
  
	var tooltip = svg.append("g")
  	.attr("transform", "translate("+[width/2, 50]+")")
  	.style("opacity", 0);
  var titles = tooltip.append("g").attr("transform", "translate("+[-5,0]+")")
  titles.append("text").attr("text-anchor", "end").text("stem(fr):");
  titles.append("text")
    .attr("text-anchor", "end")
    .attr("transform", "translate("+[0,15]+")")
    .text("rank:");
  titles.append("text")
    .attr("text-anchor", "end")
    .attr("transform", "translate("+[0,30]+")")
    .text("x-value:");
  var values = tooltip.append("g").attr("transform", "translate("+[5,0]+")")
  var stem = values.append("text");
  stem.attr("text-anchor", "start");
  var rank = values.append("text");
  rank.attr("text-anchor", "start")
  	.attr("transform", "translate("+[0,15]+")");
  var value = values.append("text");
  value.attr("text-anchor", "start")
    .attr("transform", "translate("+[0,30]+")");
  
  function dottype(d) {
    d.stem = d.stem;
    d.rank = +d.rank;
    d.trend = +d.trend;
    d.originalX = width/2+d.trend*6000;
    d.x = d.originalX;
    d.y = height/2;
    return d;
  }
  
d3.csv("data.csv", dottype, function(error, trendData) {
	if (error) throw error;

</script>

https://d3js.org/d3.v4.0.0-alpha.35.min.js