Assign a variable name to an array object in D3.js

Question

The code as it stands currently works fine, the only addition is I would like to assign a name to the object that is sent to the console using the clicky function. The console returns Object {type: "MultiPolygon", coordinates: Array[1]} and I would like to assign that to a variable name so it can be referenced later when I bring in a CSV file with the same generated name. How do I go about doing that?

var northcentral = {
  "47": 1, "37": 1, "45": 1, "13": 1
};

var northcentral_c = {
  "25": 1, "09": 1, "44": 1, "50": 1, "33": 1, "23" :1
};  

var svg = d3.select("svg");

var path = d3.geoPath();

var nc = [];
Array.prototype.push.apply(nc,us.objects.states.geometries.filter(function(d) { return d.id in northcentral; }))
Array.prototype.push.apply(nc,us.objects.counties.geometries.filter(function(d) { return d.id in northcentral_c; }))

svg.append("path")
  .datum(topojson.merge(us, nc))
  .attr("class", "state northcentral")
  .attr("d", path)
  .on("click", clicky);

function clicky(d){
  console.log(d);
}

Answer 1

Well, there's this:

var dWhichWasClicked = null

function clicky(d){
  console.log(d);
  dWhichWasClicked = d
}

By declaring dWhichWasClicked outside of clicky(), it is available (i.e. in scope) to any other code in that file, whereas if dWhichWasClicked were declared inside clicky() it would only be in scope within that function.

That being said, it's generally a bad idea to use global variables, and while this approach is not necessarily a global variable, it comes close.

You could simply have a function that loads the csv:

function loadCSV(filename) {
  // load it now
}

And call it from the click handler

function clicky(d){
  console.log(d);
  loadCSV( getFilenameFor(d) )
}