个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 23:05:05 25 4
gpt4 key购买 nike

我正在研究染色体可视化程序。该程序允许用户选择染色体并查看它们的进化。

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

程序的这一阶段采用两个输入数组:一个包含染色体名称列表，第二个包含大小列表。这部分代码旨在显示染色体，并允许用户选择他们感兴趣的染色体。然后它将在第二个 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 chroArray = []; 这样您就可以为每个矩形附加一个事件。在这种情况下，点击返回对象的文本内容。

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);
        var chroArray = [];
//Make SVG element the proper size
        var start = 75;
        var newidth=(50+100)*Length + start;
 /* in this case I am setting the size of the svg using the viewBox attribute. You may change it back to width and height */      document.getElementById("RefChromosomes").setAttributeNS(null, "viewBox", `0 0 ${newidth} 300`);


class Chromosome{
  constructor(o){
  // the properties of the rectangle
    this.props = {}
    this.props.width = o.w;
    this.props.height = o.h;
    this.props.x = o.x;
    this.props.y = 250 - o.h;
    this.props.rx = 15;
    this.props.ry = 15;
 //the index   
    this.i = o.i;
 // the properties of the text  
    this.textprops={}
    this.textprops.x = this.props.x + this.props.width / 2; 
    this.textprops.y = 275;
 // the text content  
    this.textContent = "CHROMSOME " + Chromosomes[this.i];
  }
  
  create(){
  // a function that creates a rect element
    this.chrome = document.createElementNS(svgNS,"rect");
    for (var name in this.props) {
    if (this.props.hasOwnProperty(name)) {
      this.chrome.setAttributeNS(null, name, this.props[name]);
    }
  }
  // save the rect in the group of rects
    gchart.appendChild(this.chrome);
  }
  
  addText(){
  // a function that creates a text element
    this.text = document.createElementNS(svgNS,"text");
    for (var name in this.textprops) {
    if (this.textprops.hasOwnProperty(name)) {
      this.text.setAttributeNS(null, name, this.textprops[name]);
    }
     this.text.textContent = this.textContent;
    }
    gtext.appendChild(this.text);
  }
}


for (var i = 0; i < Length; i++) {
  
  var o = {}
  o.x = start + (150 * i);
  o.h = Positions[i]/Largest*250; 
  o.w = 50;
  o.i = i;
  // save the chromosome in the chroArray
  chroArray.push(new Chromosome(o))
}

function Draw_Chromosomes(){
  chroArray.forEach(c =>{
    c.create();
    c.addText();
    // attaching an event to every rectangle
    c.chrome.addEventListener("click",()=>{
    console.log(c.textContent)
  })
  })
}
rect{fill:blue;stroke:black;stroke-width:2}
text{font-size:12px;text-anchor:middle;}

svg{border:1px solid}
<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" >
          <g id="gchart"></g>
          <g id="gtext"></g>
      </svg>
    </div>

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

关于DOM 中的 Javascript 函数为 SVG 生成点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54947374/

25 4 0
文章推荐： javascript - 如何在 Chrome devtools 中查看 HTTP 缓存使用的空间？
文章推荐： android - 是否有一个选项可以在 android 的 where 子句中传递两个参数来访问 firestore 数据库
文章推荐： android - 为什么 Android BluetoothDevice.conenctGatt 在不使用时需要上下文
文章推荐： android - 尝试使用 FFmPeg lib 在视频上添加标题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com