vue 中使用circos插件实现基因融合图

@[TOC]
#1、首先安装npm i circos -S; 安装npm i d3 -S;npm i d3-queue-S
#2、在项目的public文件夹也就是根目录文件加下加入cytobands.csv

chrom,chromStart,chromEnd,name,gieStain
chr1,0,2300000,p36.33,gneg
chr1,2300000,5400000,p36.32,gpos25
chr1,5400000,7200000,p36.31,gneg
chr1,7200000,9200000,p36.23,gpos25
chr1,9200000,12700000,p36.22,gneg
chr1,12700000,16200000,p36.21,gpos50
chr1,16200000,20400000,p36.13,gneg
chr1,20400000,23900000,p36.12,gpos25
chr1,23900000,28000000,p36.11,gneg
chr1,28000000,30200000,p35.3,gpos25
chr1,30200000,32400000,p35.2,gneg
chr1,32400000,34600000,p35.1,gpos25
chr1,34600000,40100000,p34.3,gneg
chr1,40100000,44100000,p34.2,gpos25
chr1,44100000,46800000,p34.1,gneg
chr1,46800000,50700000,p33,gpos75
chr1,50700000,56100000,p32.3,gneg
chr1,56100000,59000000,p32.2,gpos50
chr1,59000000,61300000,p32.1,gneg
chr1,61300000,68900000,p31.3,gpos50
chr1,68900000,69700000,p31.2,gneg
chr1,69700000,84900000,p31.1,gpos100
chr1,84900000,88400000,p22.3,gneg
chr1,88400000,92000000,p22.2,gpos75
chr1,92000000,94700000,p22.1,gneg
chr1,94700000,99700000,p21.3,gpos75
chr1,99700000,102200000,p21.2,gneg
chr1,102200000,107200000,p21.1,gpos100
chr1,107200000,111800000,p13.3,gneg
chr1,111800000,116100000,p13.2,gpos50
chr1,116100000,117800000,p13.1,gneg
chr1,117800000,120600000,p12,gpos50
chr1,120600000,121500000,p11.2,gneg
chr1,121500000,125000000,p11.1,acen
chr1,125000000,128900000,q11,acen
chr1,128900000,142600000,q12,gvar
chr1,142600000,147000000,q21.1,gneg
chr1,147000000,150300000,q21.2,gpos50
chr1,150300000,155000000,q21.3,gneg
chr1,155000000,156500000,q22,gpos50
chr1,156500000,159100000,q23.1,gneg
chr1,159100000,160500000,q23.2,gpos50
chr1,160500000,165500000,q23.3,gneg
chr1,165500000,167200000,q24.1,gpos50
chr1,167200000,170900000,q24.2,gneg
chr1,170900000,172900000,q24.3,gpos75
chr1,172900000,176000000,q25.1,gneg
chr1,176000000,180300000,q25.2,gpos50
chr1,180300000,185800000,q25.3,gneg
chr1,185800000,190800000,q31.1,gpos100
chr1,190800000,193800000,q31.2,gneg
chr1,193800000,198700000,q31.3,gpos100
chr1,198700000,207200000,q32.1,gneg
chr1,207200000,211500000,q32.2,gpos25
chr1,211500000,214500000,q32.3,gneg
chr1,214500000,224100000,q41,gpos100
chr1,224100000,224600000,q42.11,gneg
chr1,224600000,227000000,q42.12,gpos25
chr1,227000000,230700000,q42.13,gneg
chr1,230700000,234700000,q42.2,gpos50
chr1,234700000,236600000,q42.3,gneg
chr1,236600000,243700000,q43,gpos75
chr1,243700000,249250621,q44,gneg
chr2,0,4400000,p25.3,gneg
chr2,4400000,7100000,p25.2,gpos50
chr2,7100000,12200000,p25.1,gneg
chr2,12200000,16700000,p24.3,gpos75
chr2,16700000,19200000,p24.2,gneg
chr2,19200000,24000000,p24.1,gpos75
chr2,24000000,27900000,p23.3,gneg
chr2,27900000,30000000,p23.2,gpos25
chr2,30000000,32100000,p23.1,gneg
chr2,32100000,36600000,p22.3,gpos75
chr2,36600000,38600000,p22.2,gneg
chr2,38600000,41800000,p22.1,gpos50
chr2,41800000,47800000,p21,gneg
chr2,47800000,52900000,p16.3,gpos100
chr2,52900000,55000000,p16.2,gneg
chr2,55000000,61300000,p16.1,gpos100
chr2,61300000,64100000,p15,gneg
chr2,64100000,68600000,p14,gpos50
chr2,68600000,71500000,p13.3,gneg
chr2,71500000,73500000,p13.2,gpos50
chr2,73500000,75000000,p13.1,gneg
chr2,75000000,83300000,p12,gpos100
chr2,83300000,90500000,p11.2,gneg
chr2,90500000,93300000,p11.1,acen
chr2,93300000,96800000,q11.1,acen
chr2,96800000,102700000,q11.2,gneg
chr2,102700000,106000000,q12.1,gpos50
chr2,106000000,107500000,q12.2,gneg
chr2,107500000,110200000,q12.3,gpos25
chr2,110200000,114400000,q13,gneg
chr2,114400000,118800000,q14.1,gpos50
chr2,118800000,122400000,q14.2,gneg
chr2,122400000,129900000,q14.3,gpos50
chr2,129900000,132500000,q21.1,gneg
chr2,132500000,135100000,q21.2,gpos25
chr2,135100000,136800000,q21.3,gneg
chr2,136800000,142200000,q22.1,gpos100
chr2,142200000,144100000,q22.2,gneg
chr2,144100000,148700000,q22.3,gpos100
chr2,148700000,149900000,q23.1,gneg
chr2,149900000,150500000,q23.2,gpos25
chr2,150500000,154900000,q23.3,gneg
chr2,154900000,159800000,q24.1,gpos75
chr2,159800000,163700000,q24.2,gneg
chr2,163700000,169700000,q24.3,gpos75
chr2,169700000,178000000,q31.1,gneg
chr2,178000000,180600000,q31.2,gpos50
chr2,180600000,183000000,q31.3,gneg
chr2,183000000,189400000,q32.1,gpos75
chr2,189400000,191900000,q32.2,gneg
chr2,191900000,197400000,q32.3,gpos75
chr2,197400000,203300000,q33.1,gneg
chr2,203300000,204900000,q33.2,gpos50
chr2,204900000,209000000,q33.3,gneg
chr2,209000000,215300000,q34,gpos100
chr2,215300000,221500000,q35,gneg
chr2,221500000,225200000,q36.1,gpos75
chr2,225200000,226100000,q36.2,gneg
chr2,226100000,231000000,q36.3,gpos100
chr2,231000000,235600000,q37.1,gneg
chr2,235600000,237300000,q37.2,gpos50
chr2,237300000,243199373,q37.3,gneg
chr3,0,2800000,p26.3,gpos50
chr3,2800000,4000000,p26.2,gneg
chr3,4000000,8700000,p26.1,gpos50
chr3,8700000,11800000,p25.3,gneg
chr3,11800000,13300000,p25.2,gpos25
chr3,13300000,16400000,p25.1,gneg
chr3,16400000,23900000,p24.3,gpos100
chr3,23900000,26400000,p24.2,gneg
chr3,26400000,30900000,p24.1,gpos75
chr3,30900000,32100000,p23,gneg
chr3,32100000,36500000,p22.3,gpos50
chr3,36500000,39400000,p22.2,gneg
chr3,39400000,43700000,p22.1,gpos75
chr3,43700000,44100000,p21.33,gneg
chr3,44100000,44200000,p21.32,gpos50
chr3,44200000,50600000,p21.31,gneg
chr3,50600000,52300000,p21.2,gpos25
chr3,52300000,54400000,p21.1,gneg
chr3,54400000,58600000,p14.3,gpos50
chr3,58600000,63700000,p14.2,gneg
chr3,63700000,69800000,p14.1,gpos50
chr3,69800000,74200000,p13,gneg
chr3,74200000,79800000,p12.3,gpos75
chr3,79800000,83500000,p12.2,gneg
chr3,83500000,87200000,p12.1,gpos75
chr3,87200000,87900000,p11.2,gneg
chr3,87900000,91000000,p11.1,acen
chr3,91000000,93900000,q11.1,acen
chr3,93900000,98300000,q11.2,gvar
chr3,98300000,100000000,q12.1,gneg
chr3,100000000,100900000,q12.2,gpos25
chr3,100900000,102800000,q12.3,gneg
chr3,102800000,106200000,q13.11,gpos75
chr3,106200000,107900000,q13.12,gneg
chr3,107900000,111300000,q13.13,gpos50
chr3,111300000,113500000,q13.2,gneg
chr3,113500000,117300000,q13.31,gpos75
chr3,117300000,119000000,q13.32,gneg
chr3,119000000,121900000,q13.33,gpos75
chr3,121900000,123800000,q21.1,gneg
chr3,123800000,125800000,q21.2,gpos25
chr3,125800000,129200000,q21.3,gneg
chr3,129200000,133700000,q22.1,gpos25
chr3,133700000,135700000,q22.2,gneg
chr3,135700000,138700000,q22.3,gpos25
chr3,138700000,142800000,q23,gneg
chr3,142800000,148900000,q24,gpos100
chr3,148900000,152100000,q25.1,gneg
chr3,152100000,155000000,q25.2,gpos50
chr3,155000000,157000000,q25.31,gneg
chr3,157000000,159000000,q25.32,gpos50
chr3,159000000,160700000,q25.33,gneg
chr3,160700000,167600000,q26.1,gpos100
chr3,167600000,170900000,q26.2,gneg
chr3,170900000,175700000,q26.31,gpos75
chr3,175700000,179000000,q26.32,gneg
chr3,179000000,182700000,q26.33,gpos75
chr3,182700000,184500000,q27.1,gneg
chr3,184500000,186000000,q27.2,gpos25
chr3,186000000,187900000,q27.3,gneg
chr3,187900000,192300000,q28,gpos75
chr3,192300000,198022430,q29,gneg
chr4,0,4500000,p16.3,gneg
chr4,4500000,6000000,p16.2,gpos25
chr4,6000000,11300000,p16.1,gneg
chr4,11300000,15200000,p15.33,gpos50
chr4,15200000,17800000,p15.32,gneg
chr4,17800000,21300000,p15.31,gpos75
chr4,21300000,27700000,p15.2,gneg
chr4,27700000,35800000,p15.1,gpos100
chr4,35800000,41200000,p14,gneg
chr4,41200000,44600000,p13,gpos50
chr4,44600000,48200000,p12,gneg
chr4,48200000,50400000,p11,acen
chr4,50400000,52700000,q11,acen
chr4,52700000,59500000,q12,gneg
chr4,59500000,66600000,q13.1,gpos100
chr4,66600000,70500000,q13.2,gneg
chr4,70500000,76300000,q13.3,gpos75
chr4,76300000,78900000,q21.1,gneg
chr4,78900000,82400000,q21.21,gpos50
chr4,82400000,84100000,q21.22,gneg
chr4,84100000,86900000,q21.23,gpos25
chr4,86900000,88000000,q21.3,gneg
chr4,88000000,93700000,q22.1,gpos75
chr4,93700000,95100000,q22.2,gneg
chr4,95100000,98800000,q22.3,gpos75
chr4,98800000,101100000,q23,gneg
chr4,101100000,107700000,q24,gpos50
chr4,107700000,114100000,q25,gneg
chr4,114100000,120800000,q26,gpos75
chr4,120800000,123800000,q27,gneg
chr4,123800000,128800000,q28.1,gpos50
chr4,128800000,131100000,q28.2,gneg
chr4,131100000,139500000,q28.3,gpos100
chr4,139500000,141500000,q31.1,gneg
chr4,141500000,146800000,q31.21,gpos25
chr4,146800000,148500000,q31.22,gneg
chr4,148500000,151100000,q31.23,gpos25
chr4,151100000,155600000,q31.3,gneg
chr4,155600000,161800000,q32.1,gpos100
chr4,161800000,164500000,q32.2,gneg
chr4,164500000,170100000,q32.3,gpos100
chr4,170100000,171900000,q33,gneg
chr4,171900000,176300000,q34.1,gpos75
chr4,176300000,177500000,q34.2,gneg
chr4,177500000,183200000,q34.3,gpos100
chr4,183200000,187100000,q35.1,gneg
chr4,187100000,191154276,q35.2,gpos25
chr5,0,4500000,p15.33,gneg
chr5,4500000,6300000,p15.32,gpos25
chr5,6300000,9800000,p15.31,gneg
chr5,9800000,15000000,p15.2,gpos50
chr5,15000000,18400000,p15.1,gneg
chr5,18400000,23300000,p14.3,gpos100
chr5,23300000,24600000,p14.2,gneg
chr5,24600000,28900000,p14.1,gpos100
chr5,28900000,33800000,p13.3,gneg
chr5,33800000,38400000,p13.2,gpos25
chr5,38400000,42500000,p13.1,gneg
chr5,42500000,46100000,p12,gpos50
chr5,46100000,48400000,p11,acen
chr5,48400000,50700000,q11.1,acen
chr5,50700000,58900000,q11.2,gneg
chr5,58900000,62900000,q12.1,gpos75
chr5,62900000,63200000,q12.2,gneg
chr5,63200000,66700000,q12.3,gpos75
chr5,66700000,68400000,q13.1,gneg
chr5,68400000,73300000,q13.2,gpos50
chr5,73300000,76900000,q13.3,gneg
chr5,76900000,81400000,q14.1,gpos50
chr5,81400000,82800000,q14.2,gneg
chr5,82800000,92300000,q14.3,gpos100
chr5,92300000,98200000,q15,gneg
chr5,98200000,102800000,q21.1,gpos100
chr5,102800000,104500000,q21.2,gneg
chr5,104500000,109600000,q21.3,gpos100
chr5,109600000,111500000,q22.1,gneg
chr5,111500000,113100000,q22.2,gpos50
chr5,113100000,115200000,q22.3,gneg
chr5,115200000,121400000,q23.1,gpos100
chr5,121400000,127300000,q23.2
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,您的问题提到的是vue3使用pdfjs实现预览功能,而不是vue2。以下是在vue3使用pdfjs实现上一页下一页的方法: 1. 首先,安装pdfjs-dist件: ```shell npm i pdfjs-dist ``` 2. 在Vue组件引入pdfjs-dist: ```javascript import pdfjsLib from 'pdfjs-dist'; ``` 3. 在Vue组件定义一个变量来存储PDF文档: ```javascript let pdfDoc = null; ``` 4. 编写一个方法来加载PDF文档: ```javascript async function loadPdf(url) { const loadingTask = pdfjsLib.getDocument(url); pdfDoc = await loadingTask.promise; renderPage(pageNum); } ``` 5. 编写一个方法来渲染PDF文档的某一页: ```javascript async function renderPage(num) { const page = await pdfDoc.getPage(num); const canvas = document.getElementById('pdf-canvas'); const ctx = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1 }); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: ctx, viewport: viewport }; await page.render(renderContext); } ``` 6. 在Vue组件定义两个变量来存储当前页码和总页数: ```javascript let pageNum = 1; let numPages = 0; ``` 7. 编写一个方法来获取PDF文档的总页数: ```javascript async function getPageCount() { numPages = pdfDoc.numPages; } ``` 8. 在Vue组件定义两个方法来实现上一页和下一页的功能: ```javascript async function goPrevious() { if (pageNum <= 1) { return; } pageNum--; await renderPage(pageNum); } async function goNext() { if (pageNum >= numPages) { return; } pageNum++; await renderPage(pageNum); } ``` 9. 在Vue组件的模板添加一个canvas元素和两个按钮来触发上一页和下一页的方法: ```html <template> <div> <canvas id="pdf-canvas"></canvas> <button @click="goPrevious">上一页</button> <button @click="goNext">下一页</button> </div> </template> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值