在 2017 年,我的代码运行良好,您可以看到页面上出现按钮。
2017年截图:
但到现在为止,我不知道它们为什么会消失,如下图所示。
2019年截图:
我想这可能是我使用的按钮方法,因为按钮需要在地图和图表的 SVG 内,这是我发现在 2017 年唯一有效的方法。以下是两个按钮的代码。
var resetButton = document.getElementById("reset");
resetButton.disabled=false;
xZoom=d3.event.translate[0];
yZoom=d3.event.translate[1];
sZoom=d3.event.scale;
svg1.selectAll(".mapSvg").attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}
svg
.style({
'border':'0px solid #000'
})
.call(zoom);
svg.selectAll("foreignObject")
.data("1")
.enter()
.append("foreignObject")
.attr("class", "reset")
.attr("float","left")
.attr("x", width-60)
.attr("y", 10)
.append("xhtml:body")
.html(function(d){ return "<form><input type=button class=button id=reset value=reset disabled=true /></form>"})
.on("click",function(){
d3.transition().duration(250).tween("zoom", function() {
var si = d3.interpolate(sZoom, 1);
var xi = d3.interpolate(xZoom, 0);
var yi = d3.interpolate(yZoom, 0);
return function(t){
svg1.call(zoom.translate([xi(t),yi(t)]).scale(si(t)).event);
}
});
});
deathdayChart.selectAll("foreignObject")
.data("select all deaths")
.enter()
.append("foreignObject")
.attr("class", "selectAllDays")
.attr("x", widthChart - 100)
.attr("y", 5)
.attr("width", 60)
.append("xhtml:body")
.html(function(d){ return "<form><input type=button class=button id=setDay value=reset /></form>"})
.on("click",updateDeaths);