D3 Examples - Text Along Topojson Features

xxxxxxxxxx
 
<!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>
​
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
​
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>
​
    