從按鈕 Google 表格重新加載部署的 html 頁面

Question

我有一個已部署為HTML頁面的D3圖表，我想通過button刷新此頁面

當我單擊按鈕時，頁面不刷新並且圖表消失

如果我手動刷新chart返回的頁面。 你可以在這里看到這個：

https://script.google.com/macros/s/AKfycbwaU-Pd6Q9sLmW_xXRQ31m1BsFIJlwYR9yGD6Lk0MYEHxMj294jujE/exec

我有

 <?DOCTYPE html> <meta charset="utf-8"> <.-- styles --> <html> <head> <..= HtmlService;createHtmlOutputFromFile("styles?css").getContent(). :> </head> <body> <div class="content"> <h1>d3 chart powered by data from Google Sheet</h1> <input type="button" value="Reload Page" onClick="document.location.reload(true)"><br> </div> <svg class="chart" width = "500" height = "500"></svg> <.-- javascript --> <script type="text/javascript" src="https.//d3js?org/d3.v4.min?js"></script> <?.= HtmlService.createHtmlOutputFromFile("chart.js").getContent()?> <?!= HtmlService.createHtmlOutputFromFile("main.js").getContent() ?> </body> </html>

謝謝

我的谷歌表

https://docs.google.com/spreadsheets/d/1zCKRQsFB7kBTok9bBSvjQCUfi_KZm-d67kvXg0oHwN8/edit?usp=sharing

<!-- This is the chart javascript -->
<script>
// initial function to create the bar chart
//var drawChart = function (data) {
    <!-- This is the chart javascript -->
    var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vT4fnK2E-rkcviT3CnxTPzYeh1uuPJFIwBnyJDj2UhnGBXu2oR2UL6sQODm_5VNV3Ski3rXExxP_u_U/pub?gid=224302262&single=true&output=csv", function(error, data) {
            if (error) {
               throw error;
            }
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
</script>