This is a demonstration of the d3fc-label-layout component based on Mike Bostock's Let's Make a Map example. The label layout component provides an easy mechanism for labeling charts and maps in such a way that labels are positioned to avoid collisions, and (optionally) overlapping labels are removed.
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<style>
.subunit.SCT { fill: #ddc; }
.subunit.WLS { fill: #cdd; }
.subunit.NIR { fill: #cdc; }
.subunit.ENG { fill: #dcd; }
.subunit.IRL,
.subunit-label.IRL {
display: none;
}
.subunit-boundary {
fill: none;
stroke: #777;
stroke-dasharray: 2,2;
stroke-linejoin: round;
}
.subunit-boundary.IRL {
stroke: #aaa;
}
.subunit-label {
fill: #777;
fill-opacity: .5;
font-size: 20px;
font-weight: 300;
text-anchor: middle;
}
.place,
.place-label {
fill: #444;
}
text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
pointer-events: none;
}
.label rect {
fill: transparent;
}
</style>
</head>
<body>
<script src="https://npmcdn.com/topojson@1.6.24/build/topojson.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/d3fc/build/d3fc.min.js"></script>
<div id="chart" style="width: 100%; height: 1160px"></div>
<script src="map.js"></script>
</body>
</html>
https://npmcdn.com/topojson@1.6.24/build/topojson.min.js
https://d3js.org/d3.v4.js
https://unpkg.com/d3fc/build/d3fc.min.js