Correctly Accessing Assigned Json Coordinates For D3 Map Labels

give an external json file 'us-states.json' with this structure: { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'properties': { 'GEO_ID': '0400000US23', 'STATE':

Solution 1:

What you're looking for when adding label over the states, is to find the centroid of the state boundary path. d3 has a a method to calculate the centroid.

svg.selectAll("text")
   .data(json.features)
   .enter()
   .append("svg:text")
   .attr("text-anchor","middle")
   .attr('font-size', '13px')
   .attr('fill', 'blue')
    .text(function(d) {
      return d.properties.NAME;
    })
    .attr("x", function(d) {
      returnpath.centroid(d)[0];
    })
    .attr("y", function(d) {
      returnpath.centroid(d)[1];
    })

Related questions:

How to add Label to each state in d3.js (albersUsa)?

d3.js add a label in the center of a path

Blocks:

http://bl.ocks.org/pgiraud/9f400d54ce2ea7b4f820

http://bl.ocks.org/LuisSevillano/b51c795f7d68aedfb24485fbdb570c3c

Testing code here:

var width = 800;
var height = 460;

var projection = d3.geo.albersUsa()
                   .translate([width/2, height/2])    
                   .scale([1000]);          

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

var color = d3.scale.linear()
.range(["rgb(255,90,95)","rgb(84,36,55)","rgb(0,80,160)"]);

var svg = d3.select("body")
            .append("svg")
            .attr("class","map")
            .attr("width", width)
            .attr("height", height)
            .attr("align","center");

d3.csv("https://cors-anywhere.herokuapp.com/https://gist.githubusercontent.com/radaatyr/313875565a6af5832473625157bd8d40/raw/bc0edee1910034bcc72aac82de659883e6a91f45/postus.json", function(data) {
  color.domain([1,2,3]);
  
  

  d3.json("https://gist.githubusercontent.com/radaatyr/0e5fcda67ff33afb92b505c5af16d779/raw/bce351a66607ae2c9215a7919981b840c9bb4ddf/us-states.json", function(json) {

    for (var i = 0; i < data.length; i++) {

    var dataState = data[i].state;
    var dataValue = data[i].value;
    var dataLink = data[i].link;

    for (var j = 0; j < json.features.length; j++)  {
        var jsonState = json.features[j].properties.NAME;
        var jsonStateCoords = json.features[j].geometry.coordinatesif (dataState == jsonState) {

        json.features[j].properties.value = dataValue; 
        json.features[j].properties.link = dataLink;
        json.features[j].properties.coords = jsonStateCoords;

        break;
        }
    }
    };

    svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("stroke", "#fff")
        .style("stroke-width", "1")
        .style("fill", function(d) {

        var value = d.properties.value;

        if (value) {
        returncolor(value);
        } else {
        return"rgb(213,222,217)";
        }

        })  

    // part of the script that isn't working
    svg.selectAll("text")
       .data(json.features)
       .enter()
       .append("svg:text")
       .attr("text-anchor","middle")
       .attr('font-size', '13px')
       .attr('fill', 'blue')
        .text(function(d) {
          return d.properties.NAME;
        })
        .attr("x", function(d) {
          return path.centroid(d)[0];
        })
        .attr("y", function(d) {
          return path.centroid(d)[1];
        })
  });
  

});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>