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

【问题标题】：load map detail on click using D3.js使用 D3.js 在点击时加载地图详细信息
【发布时间】：2013-05-30 09:58:18
【问题描述】：

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

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

}

当我尝试单独显示 Alabama 时，它可以工作，但作为一个函数却不能。知道我做错了什么吗？谢谢

【问题讨论】：

您是否收到错误消息？您是否确认您的代码正在请求县边界的 JSON？鉴于您已经有路径，您可能还想将匹配函数传递给 .data()。
我没有收到任何错误，点击时没有任何反应。我不确定如何验证代码是否在请求 JSON，或者我应该如何传递匹配函数……我一周前就开始使用 d3
参见例如this question。
我已经给.data()添加了匹配功能，但是还是不行，没有出现错误。我想做的就像这里问的一样：(stackoverflow.com/questions/15756179/…)
您需要提供更多信息。 “不起作用”是什么意思？是否有可能根本没有调用这部分代码（例如，因为id 是您不期望的）？

标签： javascript json maps d3.js

【解决方案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; });
    });

【讨论】：