Trying to add labels to d3, can not figure out text labels

Question

I'm trying to make my map look this way

Unfortunately, my code looks this way, and I don't understand why my text nodes are so gigantic not the way I want it

this is the code that I have going or check my fiddle

This code specifically doesn't seem to produce human readable labels

grp
  .append("text")
  .attr("fill", "#000")
  .style("text-anchor", "middle")
  .attr("font-family", "Verdana")
  .attr("x", 0)
  .attr("y", 0)
  .attr("font-size", "10")
  .text(function (d, i) {
    return name;
  });

Here's my full code:

     var width = 500,
            height = 275,
            centered;

          var projection = d3.geo
            .conicConformal()
            .rotate([103, 0])
            .center([0, 63])
            .parallels([49, 77])
            .scale(500)
            .translate([width / 2.5, height / 2])
            .precision(0.1);

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

          var svg = d3
            .select("#map-selector-app")
            .append("svg")
            .attr("viewBox", `0 0 ${width} ${height}`);
          // .attr("width", width)
          // .attr("height", height);

          svg
            .append("rect")
            .attr("class", "background-svg-map")
            .attr("width", width)
            .attr("height", height)
            .on("click", clicked);

          var g = svg.append("g");
          var json = null;
          var subregions = {
            Western: { centroid: null },
            Prairies: { centroid: null },
            "Northern Territories": { centroid: null },
            Ontario: { centroid: null },
            Québec: { centroid: null },
            Atlantic: { centroid: null },
          };

          d3.json(
            "https://gist.githubusercontent.com/KatFishSnake/7f3dc88b0a2fa0e8c806111f983dfa60/raw/7fff9e40932feb6c0181b8f3f983edbdc80bf748/canadaprovtopo.json",
            function (error, canada) {
              if (error) throw error;

              json = topojson.feature(canada, canada.objects.canadaprov);
              g.append("g")
                .attr("id", "provinces")
                .selectAll("path")
                .data(json.features)
                .enter()
                .append("path")
                .attr("d", path)
                .on("click", clicked);

              g.append("g")
                .attr("id", "province-borders")
                .append("path")
                .datum(
                  topojson.mesh(canada, canada.objects.canadaprov, function (
                    a,
                    b
                  ) {
                    return a !== b;
                  })
                )
                .attr("id", "province-borders-path")
                .attr("d", path);

              // g.select("g")
              //   .selectAll("path")
              //   .each(function (d, i) {
              //     var centroid = path.centroid(d);
              //   });

              Object.keys(subregions).forEach((rkey) => {
                var p = "";
                json.features.forEach(function (f, i) {
                  if (f.properties.subregion === rkey) {
                    p += path(f);
                  }
                });
                var tmp = svg.append("path").attr("d", p);
                subregions[rkey].centroid = getCentroid(tmp.node());
                subregions[rkey].name = rkey;
                tmp.remove();
              });

              Object.values(subregions).forEach(({ centroid, name }) => {
                var w = 80;
                var h = 30;

                var grp = g
                  .append("svg")
                  // .attr("width", w)
                  // .attr("height", h)
                  .attr("viewBox", `0 0 ${w} ${h}`)
                  .attr("x", centroid[0] - w / 2)
                  .attr("y", centroid[1] - h / 2);

                // grp
                //   .append("rect")
                //   .attr("width", 80)
                //   .attr("height", 27)
                //   .attr("rx", 10)
                //   .attr("fill", "rgb(230, 230, 230)")
                //   .attr("stroke-width", "2")
                //   .attr("stroke", "#FFF");

                grp
                  .append("text")
                  .attr("fill", "#000")
                  .style("text-anchor", "middle")
                  .attr("font-family", "Verdana")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("font-size", "10")
                  .text(function (d, i) {
                    return name;
                  });

                // var group = g.append("g");
                // group
                //   .append("rect")
                //   .attr("x", centroid[0] - w / 2)
                //   .attr("y", centroid[1] - h / 2)
                //   .attr("width", 80)
                //   .attr("height", 27)
                //   .attr("rx", 10)
                //   .attr("fill", "rgb(230, 230, 230)")
                //   .attr("stroke-width", "2")
                //   .attr("stroke", "#FFF");
                // group
                //   .append("text")
                //   .attr("x", centroid[0] - w / 2)
                //   .attr("y", centroid[1] - h / 2)
                //   .text(function (d, i) {
                //     return name;
                //   });
              });

              // g.append("button")
              //   .attr("class", "wrap")
              //   .text((d) => d.properties.name);
            }
          );

          function getCentroid(element) {
            var bbox = element.getBBox();
            return [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
          }

          function clicked(d) {
            var x, y, k;

            if (d && centered !== d) {
              // CENTROIDS for subregion provinces
              var p = "";
              json.features.forEach(function (f, i) {
                if (f.properties.subregion === d.properties.subregion) {
                  p += path(f);
                }
              });
              var tmp = svg.append("path");
              tmp.attr("d", p);
              var centroid = getCentroid(tmp.node());
              tmp.remove();

              // var centroid = path.centroid(p);
              x = centroid[0];
              y = centroid[1];
              k = 2;

              if (d.properties.subregion === "Northern Territories") {
                k = 1.5;
              }

              centered = d;
            } else {
              x = width / 2;
              y = height / 2;
              k = 1;
              centered = null;
            }

            g.selectAll("path").classed(
              "active",
              centered &&
                function (d) {
                  return (
                    d.properties &&
                    d.properties.subregion === centered.properties.subregion
                  );
                  // return d === centered;
                }
            );

            g.transition()
              .duration(650)
              .attr(
                "transform",
                "translate(" +
                  width / 2 +
                  "," +
                  height / 2 +
                  ")scale(" +
                  k +
                  ")translate(" +
                  -x +
                  "," +
                  -y +
                  ")"
              )
              .style("stroke-width", 1.5 / k + "px");
          }

          .background-svg-map {
            fill: none;
            pointer-events: all;
          }

          #provinces {
            fill: rgb(230, 230, 230);
          }

          #provinces > path:hover {
            fill: #0630a6;
          }

          #provinces .active {
            fill: #0630a6;
          }

          #province-borders-path {
            fill: none;
            stroke: #fff;
            stroke-width: 1.5px;
            stroke-linejoin: round;
            stroke-linecap: round;
            pointer-events: none;
          }

        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <div id="map-selector-app"></div>

Answer 1

The basic workflow for labels with a background is:

• Position a parent g
• Add the text
• Add the rectangle and set it's size based on the bounding box of the parent g and then move it behind the text.

For d3v3, I'm going to actually add the rectangle before the text, but not style it until the text is added and the required size is known. If we append it after it will be infront of the text. In d3v4 there's a handy .lower() method that would move it backwards for us, in d3v3, there are ways to do this, but for simplicity, to ensure the rectangle is behind the text, I'll add it first

I'm going to deviate from your code at a more foundational level in my example. I'm not going to append child SVGs as this is introducing some sizing issues for you. Also, instead of using a loop to append the labels, I'm going to use a selectAll()/enter() cycle. This means I need a data array not an object ultimately. In order to help build that array I'll use an object though - by going through your json once, we can build a list of regions and create a geojson feature for each. The geojson feature is nice as it allows us to use path.centroid() which allows us to find the centroid of a feature without additional code.

So first, I need to create the data array:

  var subregions = {};
  json.features.forEach(function(feature) {
     var subregion = feature.properties.subregion;
     // Have we already encountered this subregion? If not, add it.
     if(!(subregion in subregions)) {
        subregions[subregion] = {"type":"FeatureCollection", features: [] };
     }
     // For every feature, add it to the subregion featureCollection:
     subregions[subregion].features.push(feature);
  })
  // Convert to an array:
  subregions = Object.keys(subregions).map(function(key) {
    return { name: key, geojson: subregions[key] };
  })

Now we can append the parent g with a standard d3 selectAll/enter statement:

  // Create a parent g for each label:
  var subregionsParent  = g.selectAll(null)
    .data(subregions)
    .enter()
    .append("g")
    .attr("transform", function(d) {
       // position the parent, so we don't need to position each child based on geographic location:
       return "translate("+path.centroid(d.geojson)+")";
    })

Now we can add the text and rectangle:

      // add a rectangle to each parent `g`
      var boxes = subregionsParent.append("rect");
        
      // add text to each parent `g`
      subregionsParent.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor","middle");
        
      // style the boxes based on the parent `g`'s bbox
      boxes
        .each(function() {
            var bbox = this.parentNode.getBBox();
            d3.select(this)
              .attr("width", bbox.width + 10)
              .attr("height", bbox.height +10)
              .attr("x", bbox.x - 5)
              .attr("y", bbox.y - 5)
              .attr("rx", 10)
              .attr("ry", 10)
              .attr("fill","#ccc")
        })

You can see the centroid method (whether using your existing function or path.centroid()) can be a little dumb when it comes to placement given some of the overlap on the map. There are ways you could modify that - perhaps adding offsets to the data, or manual exceptions when adding the text. Though on a larger SVG there shouldn't be overlap. Annotations are notoriously difficult to do.

Here's my result with the above:

And a snippet to demonstrate (I've removed a fair amount of unnecessary code to make a simpler example, but it should retain the functionality of your example):

var width = 500,
  height = 275, 
  centered;

var projection = d3.geo.conicConformal()
  .rotate([103, 0])
  .center([0, 63])
  .parallels([49, 77])
  .scale(500)
  .translate([width / 2.5, height / 2])
  
var path = d3.geo.path().projection(projection);

var svg = d3
  .select("#map-selector-app")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`);

var g = svg.append("g");

d3.json("https://gist.githubusercontent.com/KatFishSnake/7f3dc88b0a2fa0e8c806111f983dfa60/raw/7fff9e40932feb6c0181b8f3f983edbdc80bf748/canadaprovtopo.json",
            function (error, canada) {
              if (error) throw error;

    json = topojson.feature(canada, canada.objects.canadaprov);
    var provinces = g.append("g")
     .attr("id", "provinces")
     .selectAll("path")
     .data(json.features)
     .enter()
     .append("path")
     .attr("d", path)
     .on("click", clicked);
     
    g.append("g")
      .attr("id", "province-borders")
      .append("path")
      .datum(topojson.mesh(canada, canada.objects.canadaprov, function (a,b) { return a !== b; }))
      .attr("id", "province-borders-path")
      .attr("d", path);
      
    // Add labels:
    // Get the data:
      var subregions = {};
      json.features.forEach(function(feature) {
         var subregion = feature.properties.subregion;
         
         if(!(subregion in subregions)) {
            subregions[subregion] = {"type":"FeatureCollection", features: [] };
         }
         subregions[subregion].features.push(feature);
      })
      // Convert to an array:
      subregions = Object.keys(subregions).map(function(key) {
        return { name: key, geojson: subregions[key] };
      })
      
      // Create a parent g for each label:
      var subregionsParent  = g.selectAll(null)
        .data(subregions)
        .enter()
        .append("g")
        .attr("transform", function(d) {
           return "translate("+path.centroid(d.geojson)+")";
        })
        
      var boxes = subregionsParent.append("rect");
        
      subregionsParent.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor","middle");
        
      boxes
        .each(function() {
            var bbox = this.parentNode.getBBox();
            d3.select(this)
              .attr("width", bbox.width + 10)
              .attr("height", bbox.height +10)
              .attr("x", bbox.x - 5)
              .attr("y", bbox.y - 5)
              .attr("rx", 10)
              .attr("ry", 10)
              .attr("fill","#ccc")
        })
        // End labels.


      
          function getCentroid(element) {
            var bbox = element.getBBox();
            return [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
          }

          function clicked(d) {
            var x, y, k;

            if (d && centered !== d) {
              // CENTROIDS for subregion provinces
              var p = "";
              json.features.forEach(function (f, i) {
                if (f.properties.subregion === d.properties.subregion) {
                  p += path(f);
                }
              });
              var tmp = svg.append("path");
              tmp.attr("d", p);
              var centroid = getCentroid(tmp.node());
              tmp.remove();

              x = centroid[0];
              y = centroid[1];
              k = 2;

              if (d.properties.subregion === "Northern Territories") {
                k = 1.5;
              }

              centered = d;
            } else {
              x = width / 2;
              y = height / 2;
              k = 1;
              centered = null;
            }

            g.selectAll("path").classed(
              "active",
              centered &&
                function (d) {
                  return (
                    d.properties &&
                    d.properties.subregion === centered.properties.subregion
                  );
                }
            );

            g.transition()
              .duration(650)
              .attr("transform","translate(" + width / 2 + "," + height / 2 +")scale(" +            
                  k +")translate(" + -x + "," + -y + ")"
              )
              .style("stroke-width", 1.5 / k + "px");
          }
    })

.background-svg-map {
            fill: none;
            pointer-events: all;
          }

          #provinces {
            fill: rgb(230, 230, 230);
          }

          #provinces > path:hover {
            fill: #0630a6;
          }

          #provinces .active {
            fill: #0630a6;
          }

          #province-borders-path {
            fill: none;
            stroke: #fff;
            stroke-width: 1.5px;
            stroke-linejoin: round;
            stroke-linecap: round;
            pointer-events: none;
          }

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<div id="map-selector-app"></div>