CODEWITHSUNDEEP
svgd3.js
helixmat
helixmat

Reputation: 163

d3.js- noob- how to bind data to path from external svg by path ID?

I'm attempting to make a chloropleth map using an SVG file of the counties and a csv of data for each of these. I'm new to D3 and working off of an example that used geoJSON.(thank you Scott Murray). The example ties the data to the shapes like so:

d3.json("us-states.json", function(json) {

                    //Merge the ag. data and GeoJSON
                    //Loop through once for each ag. data value
                    for (var i = 0; i < data.length; i++) {

                        var dataState = data[i].state;              //Grab state name
                        var dataValue = parseFloat(data[i].value);  //Grab data value, and convert from string to float

                        //Find the corresponding state inside the GeoJSON
                        for (var j = 0; j < json.features.length; j++) {

                            var jsonState = json.features[j].properties.name;

                            if (dataState == jsonState) {

                                //Copy the data value into the JSON
                                json.features[j].properties.value = dataValue;

                                //Stop looking through the JSON
                                break;

                            }
                        }       
                    }

                    //Bind data and create one path per GeoJSON feature
                    svg.selectAll("path")
                       .data(json.features)
                       .enter()
                       .append("path")
                       .attr("d", path)
                       .style("fill", function(d) {
                            //Get data value
                            var value = d.properties.value;

                            if (value) {
                                //If value exists…
                                return color(value);
                            } else {
                                //If value is undefined…
                                return "#ccc";
                            }
                       });

But I am having trouble in adapting this to the svg. I don't need to have it create the paths- they're already there, but how would one write essentially: " if data.County == path id, bind that row's data to the path" ?

Any help is much appreciated!!

Upvotes: 1

Views: 2084

Answers (1)

elydelacruz
elydelacruz

Reputation: 155

Take a look at https://github.com/mbostock/d3/wiki/Selections#wiki-datum.
Do something like:

// Where each path has an id
var paths = d3.selectAll('.my-paths path'),
 elm,
 data = [] // your data here,
 your_criteria_here;

data.forEach(function (x, i, a) {

    your_criteria_here = x.criteria;

    // No data is available for the elements in this case yet
    // @see https://github.com/mbostock/d3/wiki/Selections#wiki-each
    paths.each(function (d, i) {

      // Wrap dom element in d3 selection
      elm = d3.select(this);

      if (elm.attr('id') == your_criteria_here) {
          // Do something here ...
      }

    });

});

Note this example makes use of [].forEach which is an ecmascript 5 feature (@see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach)

Upvotes: 1

Related Questions