title: D3.js v3 foreignObject Html button doesn't work after 2 years no update of my code
body: <p>In 2017, my code worked well as you see the buttons appeared on the page.</p>
  
  <p>2017 screenshot :</p>
  
  <p><a href="https://i.stack.imgur.com/wjiwp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wjiwp.jpg" alt="screenshot"></a></p>
  
  <p>But by now, I had no idea why they disappeared as the following image shows.</p>
  
  <p>2019 screenshot :</p>
  
  <p><a href="https://i.stack.imgur.com/d9ehA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d9ehA.jpg" alt="screenshot"></a></p>
  
  <p>I guess this may be for the button method I used, because the buttons needed to be inside the SVG of the map and chart, that was the only one method I found worked at 2017. The following is the code of the two buttons.</p>
  
  <pre><code>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 "&lt;form&gt;&lt;input type=button class=button id=reset value=reset disabled=true /&gt;&lt;/form&gt;"})
                  .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 "&lt;form&gt;&lt;input type=button class=button id=setDay value=reset /&gt;&lt;/form&gt;"})
                          .on("click",updateDeaths);
  </code></pre>