0

在 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);
4

0 回答 0