使用d3加载新页面

Question

我有一张美国的SVG地图，我想这样做，当你点击某个状态时，新页面会加载有关该状态的信息。

这是填充状态的代码（路径已经创建）;它是一个等值区，所以颜色是基于谋杀率。

d3.selectAll("path") .attr("fill", function(d) { return color(murderrates[codes.indexOf(this.id)]) }) .on("click", **load(new page, this.id)**)

星号之间的伪代码是我想要完成的：当点击状态时，打开一个新页面并告诉它哪个状态被点击以便它知道要显示什么信息。换句话说，新页面应该能够接受一个参数＆＃34; - 状态 - 所以它知道要显示什么。

编辑：我没有为每个州加载不同的页面。相反，它是一个页面，可以显示50个不同的东西，具体取决于导致它加载的状态。所以，让我说我的新页面中有一个名为origin的变量。我希望在加载时将origin的值设置为this.id。

Answer 1

根据@ StephenThomas的评论，你可以定义一个使用loadPage更改this.id的函数window.location：

function loadPage(){
    window.location = URL + "?origin=" + this.id;
}

这将打开一个新页面，其中查询参数"origin"将包含this.id。然后，您可以解析查询参数，例如like this

然后将该函数作为回调函数传递给onclick，因为D3会自动将this的值设置为相应的元素：

.on("click", loadPage)