load map detail on click using D3.js

Question

I am trying to build a map from the USA. Once the map is displayed with it's states boundaries I want to display the county boundaries on click This is how I display the map:

var width = 960,
    height = 500,
    centered;

var path = d3.geo.path();

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

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

var g = svg.append("g")
    .attr("id", "states");

d3.json("readme.json", function(json) {
  g.selectAll("path")
      .data(json.features)
     .enter().append("path")
      .attr("d", path)
      .on("click", loadcounties);
});

And here is the function I use to load the regions (only alabama in here):

function loadcounties (d) {
    var id = d3.select(this).attr("name");
    var bbox = this.getBBox();

    if (id == "Alabama") {
   d3.json("alabamacounties.json", function(json) {
          g.selectAll("path")
              .data(json.features)
              .enter()
              .append("path")
              .attr("d", path);
                  });
}

}

When I try to display Alabama on its own it works but as a function it doesn't. Any idea of what I am doing wrong?thanks

Are you getting an error message? Did you verify that your code is requesting the JSON for the county boundaries? You might also want to pass a matching function to `.data()` given that you have paths already. — Lars Kotthoff, May 30 '13 at 11:39
I don't get any errors, just nothing happens on click. I am not sure how to verify if the code is requesting the JSON or how should I pass a matching function... I have started using d3 one week ago — nuri, May 30 '13 at 12:53
See for example [this question](http://stackoverflow.com/questions/16544269/why-is-the-first-link-item-being-skipped/16545072). — Lars Kotthoff, May 30 '13 at 13:05
I have added the matching function to `.data()` but is still not working, no errors appear. What I want to do is something like what was asked here: (http://stackoverflow.com/questions/15756179/load-map-detail-on-region-click-using-d3-js) — nuri, May 30 '13 at 13:37
You'll need to provide more information. What do you mean by "doesn't work"? Is it possible that this part of the code simply isn't called (e.g. because `id` is something you don't expect)? — Lars Kotthoff, May 30 '13 at 14:03

score 1 · Answer 1 · answered Jun 06 '13 at 14:49

This is how I solved it:

function loadstate(d) {

var g = svg.append("g")
        .attr("id", "counties");

        switch (d.id){

        case "01" : 
          jsoncounty="countiesjson/01.json";
        break;

Like this for every state and then:

d3.json(jsoncounty, function(json) {
        g.selectAll("path")
            .data(json.features, function(d,i) { return d+i; })
            .enter()
            .append("path")
            .attr("d", path)
            .on("click",text)
            .append("title")
            .text(function(d) { return d.properties.NAME; });
    });

load map detail on click using D3.js

1 Answers1