Function d3.js：在mouseclick上交换topojson映射？

我正在用d3.js制作一个topojson地图。我在一个大的topojson中有三个数据集，它们绘制不同的地图，我想在mouseclick上交换地图

我想我可以通过向mouseclick事件添加一个函数并将结果放入

.datum（）

操作符来实现这一点

---

更新：这是工作代码，谢谢Lars

var mapPath = d3.geo.path().projection(mapProjection),
    jsondata,
    jsonobject,
    jsonobjectkeys,
    numberOfKeys,
    currentMap
    mapNumber;

d3.json("test.json", function(error, json){
      if (error) return console.warn(error);
      jsondata = json; //Store data in the variable "jsondata"
      jsonobject = json.objects;
      jsonobjectkeys = [];
      numberOfKeys = 0;

      //Get the maps(keys) from the jsonobject
      for(var k in jsonobject) jsonobjectkeys.push(k);

      //Find number of objects in jsondata
      for (objects in jsonobject){
        if((jsonobject).hasOwnProperty(objects)){
            numberOfKeys++;
        }
      }

mapNumber = jsonobjectkeys[0];

currentMap = eval("jsonobject." + (mapNumber));

//Map
var mapSVG = d3.select(".the_map")
                .append("svg")
                .attr("width", mapW)
                .attr("height", mapH);
    mapSVG.append("path")
            .datum(topojson.object(jsondata, currentMap))
            .attr("d", mapPath)
            .attr("width", mapW)
            .attr("height", mapH)
            .attr("class", "land");

//Timeline

//Create scale
var xScale = d3.scale.linear()
    .domain([0, (numberOfKeys-1)])
    .range([timelinePadding, timelineW - timelinePadding]);

//Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(numberOfKeys-1);

var timeline = d3.select("#timeline")
        .append("svg")
        .attr("width", timelineW)
        .attr("height", timelineH);
    timeline.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, " + timelinePadding + ")")
        .call(xAxis);
    timeline.selectAll("circle")
       .data(jsonobjectkeys)
       .enter()
       .append("circle")
       .attr("width", timelineW)
       .attr("height", timelineH)
       .attr("cx", function(d,i){return xScale(i);})
       .attr("cy", timelinePadding)
       .attr("r", 7)
       .attr("class", "events")
       .style("cursor", "hand")
       .on("click", function(d){
            redrawMap(d);
       });

 function redrawMap(i){
            currentMap = eval("jsonobject." + (i));
    //Update
    mapSVG.selectAll("path")
    .datum(topojson.object(jsondata, currentMap))
    .attr("d", mapPath);
}

});

---

原始代码，非工作代码：

var mapPath = d3.geo.path().projection(mapProjection),
    jsondata,
    jsonobject,
    jsonobjectkeys,
    numberOfKeys;


d3.json("test.json", function(error, json){
      if (error) return console.warn(error);
      jsondata = json; //Store data in the variable "jsondata"
      jsonobject = json.objects;
      jsonobjectkeys = [];
      numberOfKeys = 0;

      //Get the maps(keys) from the jsonobject
      for(var k in jsonobject) jsonobjectkeys.push(k);

      //Find number of objects in jsondata
      for (objects in jsonobject){
        if((jsonobject).hasOwnProperty(objects)){
            numberOfKeys++;
        }
      }

var mapNumber = jsonobjectkeys[0];

var currentMap = eval("jsonobject." + (mapNumber));

currentMapData(mapNumber);

//Map
var mapSVG = d3.select(".the_map")
                .append("svg")
                .attr("width", mapW)
                .attr("height", mapH);
    mapSVG.append("path")
            .datum(topojson.object(jsondata, currentMap))
            .attr("d", mapPath)
            .attr("width", mapW)
            .attr("height", mapH)
            .attr("class", "land");

//Timeline

//Create scale
var xScale = d3.scale.linear()
    .domain([0, (numberOfKeys-1)])
    .range([timelinePadding, timelineW - timelinePadding]);

//Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(numberOfKeys-1);

var timeline = d3.select("#timeline")
        .append("svg")
        .attr("width", timelineW)
        .attr("height", timelineH);
    timeline.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, " + timelinePadding + ")")
        .call(xAxis);
    timeline.selectAll("circle")
       .data(jsonobjectkeys)
       .enter()
       .append("circle")
       .attr("width", timelineW)
       .attr("height", timelineH)
       .attr("cx", function(d,i){return xScale(i);})
       .attr("cy", timelinePadding)
       .attr("r", 7)
       .attr("class", "events")
       .style("cursor", "hand")
       .on("click", function(d,i){
            currentMapData(i);
       });

 function currentMapData(i){
            mapNumber = jsonobjectkeys[i];
    console.log("showing this map: " + mapNumber);
    currentMap = eval("jsonobject." + (mapNumber));
    return currentMap;
}

});

---

看起来您正在将对象键绑定为数据，但希望在

currentMapData（）

中接收索引。因此，您看到的错误是由于您试图使用一个键来索引数组而导致的。通过使用

onclick

处理程序的第二个参数，即replace，可以传递索引而不是键

.on("click", function(d){
     currentMapData(d);
});

与

---

你说得对！我更新了代码，但是地图仍然没有改变。是否有其他地方我需要更改为代码，以便更新路径（我认为这足以更新数据属性）？您需要重新绘制所有元素。更多细节请参见（和第2部分）。谢谢你，Lars，我将试一试。我仍然不确定如何进行此操作，因为.datum（）不计算进入和退出选择。如果不使用.enter（），我如何重新绘制？除了您的选择是隐式的之外，这一点也适用。因此，在更新数据之后，选择元素并调用函数重新绘制。它更类似于教程的第二部分，其中更新了现有元素。

.on("click", function(d, i){
     currentMapData(i);
});