时间戳

首页 > 解决方案 > JavaScript 函数在 AJAX XML HttpRequest 之后不起作用

javascript - JavaScript 函数在 AJAX XML HttpRequest 之后不起作用

问题描述

我正在创建一个交互式地图，允许用户从时间轴中选择年份并过滤事件，这是通过每次重绘 SVG 的 XML HttpRequest 完成的。

地图的 SVG 代码，包括用于缩放的 JavaScript 函数和工具提示，在用户每次选择年份/过滤器时都会重新编写。该代码是 Java 中的字符串，因为它依赖于 if 语句。但是，每当用户选择年份/过滤器时，JavaScript 函数都不起作用。JavaScript 代码在一个类中在单独的 if 语句中重复 3 次

这是 XML http 请求代码：

var year_selected = document.getElementById('year').innerHTML;                      
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("map").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "/BCMapYear.html/"+year_selected, true);
xhttp.send();

JavaScript：

"<script type=\"text/javascript\">" +
                                        "var transformMatrix = [1,0,0,1,0,0];"+
                                        "var svg = document.getElementById('svg-map');"+
                                        "var viewBox = svg.getAttributeNS(null, \"viewBox\").split(\" \");"+
                                        "var centerX = parseFloat(viewBox[2])/2;"+
                                        "var centerY = parseFloat(viewBox[3])/2;"+
                                        "var matrixGroup = svg.getElementById(\"matrix-group\");"+
                                        "var origMatrix = [1,0,0,1,0,0];"+

                                        "function reset() {\n" + 
                                        "               for(var i = 0; i < 6; i++) {\n" + 
                                        "                   transformMatrix[i] = origMatrix[i];\n" + 
                                        "               }               \n" + 
                                        "               var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";\n" + 
                                        "               matrixGroup.setAttributeNS(null, \"transform\", newMatrix); \n" + 
                                        "          \n" + 
                                        "           };"+

                                        "function pan(dx, dy) {"+
                                            "transformMatrix[4] += dx;"+
                                            "transformMatrix[5] += dy;"+

                                            "var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
                                            "matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+
                                        "}"+

                                        "function zoom(scale) {"+
                                            "for(var i = 0; i < 4; i++) {"+
                                                "transformMatrix[i] *= scale;"+
                                            "}"+

                                            "transformMatrix[4] += (1-scale) * centerX;"+
                                            "transformMatrix[5] += (1-scale)* centerY;"+

                                            "var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
                                            "matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+ 
                                        "}"+



                             "</script>"

                             +"<script type=\"text/ecmascript\">\n" + 
                                            "       (function() {\n" + 
                                            "        var svg = document.getElementById('svg-map');\n" + 
                                            "        var tooltip = svg.getElementById('tooltip');\n" + 
                                            "        var tooltipText0 = document.getElementById('tooltiptext0').firstChild;\n" + 
                                            "        var tooltipText1 = document.getElementById('tooltiptext1').firstChild;\n" + 
                                            "        var tooltipText2 = document.getElementById('tooltiptext2').firstChild;\n" + 
                                            "        var tooltipText3 = document.getElementById('tooltiptext3').firstChild;\n" + 
                                            "        var triggers = svg.getElementsByClassName('tooltip-trigger');\n" + 
                                            "        for (var i = 0; i < triggers.length; i++) {\n" + 
                                            "            triggers[i].addEventListener('mousemove', showTooltip);\n" + 
                                            "            triggers[i].addEventListener('mouseout', hideTooltip);\n" + 
                                            "        }\n" + 
                                            "        function showTooltip(evt) {\n" + 
                                            "            var CTM = svg.getScreenCTM();\n" + 
                                            "            var x = (evt.clientX - CTM.e + 6) / CTM.a;\n" + 
                                            "            var y = (evt.clientY - CTM.f + 20) / CTM.d;\n" + 
                                            "            tooltip.setAttributeNS(null, \"transform\", \"translate(\" + x + \" \" + y + \")\");\n" + 
                                            "            tooltip.setAttributeNS(null, \"visibility\", \"visible\");\n" +
                                            "            tooltipText0.data = evt.target.getAttributeNS(null, \"data-tooltip-text0\");\n" + 
                                            "            tooltipText1.data = evt.target.getAttributeNS(null, \"data-tooltip-text1\");\n" + 
                                            "            tooltipText2.data = 
   evt.target.getAttributeNS(null, \"data-tooltip-text2\");\n" + 
                                            "            tooltipText3.data = 
    evt.target.getAttributeNS(null, \"data-tooltip-text3\");\n" + 
                                            "        }\n" + 
                                            "        function hideTooltip(evt) {\n" + 
                                            "            
    tooltip.setAttributeNS(null, \"visibility\", \"hidden\");\n" + 
                                            "        }\n" + 
                                            "    })()" + 
                                            "    </script>";

在控制台上出现未捕获的参考错误缩放未定义

标签： javascriptajaxsvgtooltipzooming

解决方案

你可以加 （）; 在您要执行的块之后。

(function(){
    //Bunch of code...
})();

推荐阅读