Text Along Topojson Features

Block showing how to place text on topojson lines in d3.js v4. Built off of one of Mike Bostock's blocks on displaying arcs (Snowden's Route I think). Whitehorse, in the Yukon, Canada, is shown on the map with the small circle.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
  fill: none;
  stroke: #ddd;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}

.land {
  fill: #a8ddb5;
}

.boundary {
  fill: none; 
  stroke: #fff;
  stroke-width: 0.5px;
}

.buffer-text {
	font-size: 12px;
	font-family: Arial;
	color: #777;
}	
.circle {
	fill: white;
	stroke: #0868ac;
	stroke-width: 2;
}
.buffer {
	fill:none;
	stroke-width: 1;
	stroke: #bbb;
}
</style>
<body>
<svg width="960" height="500"></svg>

var points = {
	Whitehorse: [-135.1,60.7]
};

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var projection = d3.geoKavrayskiy7()
    .scale(170)
    .rotate([-10, 0])
    .translate([width / 2, height / 2])
    .precision(.1);
/*
// Alternatively: 
var projection = d3.geoMercator().scale(100)
	;
*/

var path = d3.geoPath()
    .projection(projection);

var g1 = svg.append("g");
var g2 = svg.append("g");
var g3 = svg.append("g");

// Add globe outline and graticule	
g1.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path)
    .attr("fill", "#43a2ca")
    .attr("stroke", "black");
	
g1.append("path")
    .datum(d3.geoGraticule())
    .attr("class", "graticule")
    .attr("d", path);
	
// Add world map
d3.json("world-50m.json", function(error, world) {
  if (error) throw error;

g2.insert("path", ".land")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

g2.insert("path", ".boundary")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
	 
var point = g2.append("g")
		.attr("class", "points")
		.selectAll("g")
		.data(d3.entries(points))
		.enter().append("g")
		.attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; });

point.append("circle")
		.attr("r", 5)
		.attr("class","circle")
		;
});

// Add the buffer:
d3.json("buffer.json", function(error, buffer) {
	// Add the buffer lines
	g3.selectAll("path")
			.data(topojson.feature(buffer, buffer.objects.buffer).features)
			.enter().append("path")
		    .attr("d", path)
			.attr("class", "buffer")
		    .attr("id",function(d) { return "b" + d.properties.Distance; });

// Add the buffer text
	g3.selectAll(".buffer-text")
		.data(topojson.feature(buffer, buffer.objects.buffer).features)
		.enter()
		.append("text")
		.attr("class","buffer-text")
		.append("textPath")
		.attr("xlink:href", function(d) { return "#b" + d.properties.Distance; })
		.text(function(d) { return d.properties.Distance/1000 + ",000 km from Whitehorse"; })
		.attr("startOffset", "50%")
		.style("text-anchor","middle");
})

</script>

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

https://d3js.org/d3-geo-projection.v1.min.js

https://d3js.org/topojson.v1.min.js