javascript - 使用 D3.js 在点击时加载地图详细信息

Question

我正在尝试从美国构建地图。显示地图及其州边界后，我想在单击时显示县边界这是我显示地图的方式：

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);
});

这是我用来加载区域的函数（这里只有阿拉巴马州）：

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);
                  });
}

}

当我尝试单独显示阿拉巴马州时，它可以工作，但作为一项功能却不能。知道我做错了什么吗？谢谢

Answer 1

这就是我解决它的方法：

function loadstate(d) {

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

        switch (d.id){

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

对于每个州都是这样，然后：

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; });
    });