Question

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

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

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

});

任何帮助表示感谢。

Answer 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")
    ...

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

在更改映射中，您无法从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();
}

您不应将changemap（map1）作为参数调用on（）。你应该提供一个事件处理程序，on（）可以在事件发生时调用：
```
.on("click", function() {
    changemap(map1);
});
```

此代码可能还有其他问题，但您应该在继续之前修复这些问题...

使用D3.js通过鼠标单击（onclick事件）更改地图

1 个答案: