D3.js map with _d3fc-label-layout_ based label positioning

This example tries to use d3fc-label-layout to achieve overlap-free visualization of country labels. Ideas are taken from ColinEberhardt' example showing how to use d3fc-label-layout on maps.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8" \>
<style>
  path {
    stroke: white;
    stroke-width: 1.5px;
    fill: #C4C4C4;
  }
</style>
​
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://npmcdn.com/d3fc-label-layout@4.0.0/build/d3fc-label-layout.js"></script>
<script src="https://npmcdn.com/d3fc-data-join@2.0.0/build/d3fc-data-join.js"></script>
<script src="https://npmcdn.com/d3fc-rebind@4.0.1/build/d3fc-rebind.js"></script>
<script src="map.js"></script>
</body>
</html>
    

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

https://npmcdn.com/d3fc-label-layout@4.0.0/build/d3fc-label-layout.js

https://npmcdn.com/d3fc-data-join@2.0.0/build/d3fc-data-join.js

https://npmcdn.com/d3fc-rebind@4.0.1/build/d3fc-rebind.js