Кнопка D3.js v3 foreignObject Html не работает через 2 года без обновления моего кода - PullRequest
Новая
       43

Кнопка D3.js v3 foreignObject Html не работает через 2 года без обновления моего кода

0 голосов
/ 29 мая 2019

В 2017 году мой код работал хорошо, так как вы видите, что на странице появились кнопки.

Скриншот 2017:

screenshot

Но сейчас я понятия не имел, почему они исчезли, как показано на следующем рисунке.

2019 снимок экрана:

screenshot

Я думаю, этоможет быть для метода кнопок, который я использовал, потому что кнопки должны были быть внутри 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);
...