DOM中的Javascript函数为SVG生成单击事件_Javascript_Dom_Svg

DOM中的Javascript函数为SVG生成单击事件

javascript dom svg

DOM中的Javascript函数为SVG生成单击事件,javascript,dom,svg,Javascript,Dom,Svg,我正在做一个染色体可视化程序。这个程序允许用户选择染色体并查看它们的进化目前，我试图将onclick事件添加到SVG rect元素，但失败了。下面的代码是我尝试过的许多代码的一个示例。我绝对需要这是矢量格式，这只是一个中间步骤程序的这一阶段需要两个输入数组：一个是染色体名称列表，另一个是大小列表。这部分代码旨在显示染色体，并允许用户选择他们感兴趣的染色体。然后，它将在第二个div中显示有关染色体的数据（仅包含href的文本）并生成一个按钮。单击此按钮后，他们将通过新生成的SVG进行染色体

我正在做一个染色体可视化程序。这个程序允许用户选择染色体并查看它们的进化

目前，我试图将onclick事件添加到SVG rect元素，但失败了。下面的代码是我尝试过的许多代码的一个示例。我绝对需要这是矢量格式，这只是一个中间步骤

程序的这一阶段需要两个输入数组：一个是染色体名称列表，另一个是大小列表。这部分代码旨在显示染色体，并允许用户选择他们感兴趣的染色体。然后，它将在第二个div中显示有关染色体的数据（仅包含href的文本）并生成一个按钮。单击此按钮后，他们将通过新生成的SVG进行染色体进化的交互式处理

我在绘制染色体方面取得了巨大成功，但我无法将我的对象链接到必要的javascript代码。我对Javascript比较陌生，因此非常感谢您的帮助

以下是我的测试代码：

<body>
    <button onclick="Draw_Chromosomes()">
        Start this baby up
    </button>
<!--    This is where the refrence chromosomes are displayed -->
    <div id="RefChromosomes_box" width=100%>
        <svg id="RefChromosomes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300"></svg>
    </div>

<!--    This is where the output is displayed -->
    <div id="SELECTED_CHROMOSOMES" width=100%>
    </div>

<script type="text/javascript">

        var svgNS = "http://www.w3.org/2000/svg";  
        var Chromosomes = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","X","Y"];
        var Positions = [248956422,242193529,198295559,190214555,181538259,170805979,159345973,145138636,138394717,133797422,135086622,133275309,114364328,107043718,101991189,90338345,83257441,80373285,58617616,64444167,46709983,50818468,156040895,57227415];
        var Length = Positions.length;
        var Largest= Math.max.apply(Math, Positions);
        function Draw_Chromosomes(){
            while (document.getElementById("RefChromosomes").lastChild) {
                document.getElementById("RefChromosomes").removeChild(document.getElementById("RefChromosomes").lastChild);
            }
                        //Make SVG element the proper size
            var newidth=50+100*Length;
            document.getElementById("RefChromosomes").style.width = newidth;
        //Set the parameters for the first chromosome
        var tempx=75;   
        //Draw the Chromosomes
            for (var i = 0; i < Length; i++) {
                var myChrome = document.createElementNS(svgNS,"rect");  

                var ID=Chromosomes[i] + "CHR";
                myChrome.setAttributeNS(null,"id",ID);
                myChrome.setAttributeNS(null,"x",tempx);

                //set up X position for the next one
                var tempx=tempx+100;                                
                //Calculate the Y Top position (0 for maximum length, 250 for minimum)
                // First get the length and divide it by max *250.
                var CHRLENGTH=Positions[i]/Largest*250;
                // set it for length
                var endpos=250-CHRLENGTH;
                myChrome.setAttributeNS(null,"y",endpos);
                myChrome.setAttributeNS(null,"height",CHRLENGTH);
                // set curviture
                myChrome.setAttributeNS(null,"rx",15);
                myChrome.setAttributeNS(null,"ry",15);
                // set width (standard)
                myChrome.setAttributeNS(null,"width",50);
                // Set height
                myChrome.setAttributeNS(null,"fill","blue");
                myChrome.setAttributeNS(null,"stroke","black");
                myChrome.setAttributeNS(null,"stroke-width",2);
//              myChrome.setAttributeNS(null,"onclick","alert("bla")");
                    document.getElementById("RefChromosomes").appendChild(myChrome);
                //document.getElementById(Chromosomes[i] + "CHR").dispatchEvent(new Event('click'));

                // Add text Labels
                var chrtext = document.createElementNS(svgNS,"text"); 
                chrtext.setAttributeNS(null,"x",tempx-125);
                chrtext.setAttributeNS(null,"y",280);
                chrtext.setAttributeNS(null,"font-size","12px"); 
                chrtext.setAttributeNS(null,"class","textlabel");
                chrtext.innerHTML = "CHROMSOME " + Chromosomes[i];
                document.getElementById("RefChromosomes").appendChild(chrtext);  

            }
        }                 
    }
    </script>


</body>


把这个孩子生起来
var svgNS=”http://www.w3.org/2000/svg";  
变异染色体=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”、“11”、“12”、“13”、“14”、“15”、“16”、“17”、“18”、“19”、“20”、“21”、“22”、“X”、“Y”]；
var头寸=[248956442224219352919829555919021455518153825917080597915934597314513863613383947171337974221350866221332753091143643281070437181019911899038345832574418033732855617616644441674670995081841660604089557274717415]；
变量长度=位置。长度；
var最大值=数学最大值应用（数学、位置）；
函数Draw_染色体（）{
while（document.getElementById（“ref”）.lastChild）{
document.getElementById（“ref染色体”）.removeChild（document.getElementById（“ref染色体”）.lastChild）；
}
//使SVG元素具有适当的大小
var newidth=50+100*长度；
document.getElementById（“ref”）.style.width=newidth；
//设置第一条染色体的参数
var-tempx=75；
//画染色体
对于（变量i=0；i

svg只是一种xml结构，因此您可以向构成svg的不同xml元素添加一个id，并像html一样独立选择它们。

我已经更改了您的代码。现在每个染色体都是我保存在数组中的对象：

var chroArray=[]通过这种方式，您可以将每个矩形附加到一个事件。在这种情况下，单击返回对象的文本内容

var svgNS=”http://www.w3.org/2000/svg";  
变异染色体=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”、“11”、“12”、“13”、“14”、“15”、“16”、“17”、“18”、“19”、“20”、“21”、“22”、“X”、“Y”]；
var头寸=[248956442224219352919829555919021455518153825917080597915934597314513863613383947171337974221350866221332753091143643281070437181019911899038345832574418033732855617616644441674670995081841660604089557274717415]；
变量长度=位置。长度；
var最大值=数学最大值应用（数学、位置）；
var chroArray=[]；
//使SVG元素具有适当的大小
var启动=75；
var newidth=（50+100）*长度+起点；
/*在本例中，我使用viewBox属性设置svg的大小。您可以将其更改回width和height*/document.getElementById（“ref染色体”）.setAttributeNS（null，“viewBox”、`0${newidth}300`）；
类染色体{
建造师（o）{
//矩形的性质
this.props={}
this.props.width=o.w；
此.props.height=o.h；
this.props.x=o.x；
这个.props.y=250-o.h；
this.props.rx=15；
this.props.ry=15；
//索引
这个。i=o.i；
//文本的属性
这个