0

我需要通过单击将一张地图更改为另一张地图。我写了一些代码，但它不起作用。

地图绘制和更改部分代码：

var projection = d3.geo.mercator()
.scale(550)
.translate([mapWidth / 2, mapHeight / 2]);

var path = d3.geo.path()
.projection(projection);

var svg = d3.select("body").append("svg")

queue()
.defer(d3.json, mapFile0)
.defer(d3.json, mapFile1)
.await(ready);


function ready(error, map0, map1) {

 var myMap = svg.selectAll("path")
 .data(topojson.feature(map0, map0.objects.countries).features)
 .enter().append("path")
 .attr("d", path)
 .attr("class", "state")
 .style("fill", "#cccccc")
 .style("stroke", "#ffffff")
 .on("click", changemap(map1));

  changemap(map) {
  myMap.data(topojson.feature(map, map.objects.countries).features)
 .enter().append("path")
 .attr("d", path)
 .exit().remove();
 }

});

任何帮助表示赞赏。

4

1 回答 1

2

四个明显的问题很突出……

  1. myMap 不应该是 enter() 选择。您应该保存更新选择，而不是 enter() 选择以便稍后调用 data()、enter()、append()，如下所示：

    var myMap = svg.selectAll("path")
    .data(topojson.feature(map0, map0.objects.countries).features);

myMap.enter().append("path")
    .attr("d", path)
    .attr("class", "state")
    ...

  2. 永远不会声明 changemap 函数，因为您缺少 function 关键字。

  3. 在 changemap 中，您不能从 enter() 选择中退出()。同样，您需要注意保存更新选择，以便无需链接即可进入/退出/等：

    function changemap(map) {
    myMap = myMap.data(topojson.feature(map, map.objects.countries).features);
    myMap.enter().append("path");
    myMap.attr("d", path);
    myMap.exit().remove();
}

  4. 您不应该将 changemap(map1) 作为 on() 的参数调用。您应该提供一个事件处理程序，当事件发生时 on() 可以调用：

    .on("click", function() {
    changemap(map1);
});

您可能对此代码有其他问题，但您应该在继续之前解决这些问题...

于 2013-08-16T07:26:21.690 回答