vue.js - 如何将 Phylotree.js 添加到 nuxt?
问题描述
我使用以下命令安装了 phylotreejs:
npm install --save phylotree
当我尝试将其导入这样的页面时:
import * as d3 from 'd3';
import phylotree from 'phylotree/build/phylotree';
我收到以下错误:
Cannot read property 'phylotree' of undefined
如果我能理解这里发生的事情,那将非常有帮助。我通过阅读 nuxt 文档 [https://nuxtjs.org/faq/] 阅读并尝试了以下内容
import phylotree from '~/node_modules/phylotree/build/phylotree.js'
export default {
head () {
return {
script: [
{ src: '~/node_modules/phylotree/build/phylotree.js' }
],
}
},
}
但似乎没有任何效果
以下是 Vue 页面,我正在尝试创建:
<template>
<div>
<section class="section">
<div class="container">
<div id="phylotree"></div>
</div>
</section>
</div>
</template>
<script>
import * as d3 from 'd3';
import phylotree from 'phylotree';
import _ from 'lodash';
export default {
data:() => ({
example_tree : "(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.397100):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.157450):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)",
}),
mounted (){
// const phylotree = require('phylotree');
var tree = d3.layout.phylotree()
.svg(d3.select("#phylotree"));
tree(example_tree).layout();
}
};
</script>
<style scoped>
#spaced {
letter-spacing: 3px;
}
.section {
padding: 1.5rem 1.5rem;
}
</style>
解决方案
我能够弄清楚发生了什么。phylotree.js 的 d3 版本是 v3,而我使用的是 v5。但即便如此,它也没有奏效。因此,我在一个简单的 html 文件中进行了尝试,并在此页面Link中找到了要求。然后尝试了以下脚本,它起作用了。但是有没有更好的方法来做到这一点。谁能帮我解决这个问题!
<template>
<section class="section">
<div class="container">
<svg id="tree_display" />
</div>
</section>
</template>
<script>
export default {
head () {
return {
script: [
{ src: 'https://d3js.org/d3.v3.min.js' },
{ src: 'https://veg.github.io/phylotree.js/phylotree.js' },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js' },
],
}
},
mounted (){
var example_tree = "(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.397100):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.157450):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)";
var tree = d3.layout.phylotree()
.svg(d3.select("#tree_display"));
tree(example_tree).layout();
}
};
</script>
<style scoped>
#spaced {
letter-spacing: 3px;
}
.section {
padding: 1.5rem 1.5rem;
}
</style>
推荐阅读
- javascript - JS:从字符串中获取值
- python-3.x - pathlib match() 找不到相同模式的文件,可以通过 glob() 找到
- java - 当 a、b 或 c <= 1000 时,更快地找到所有毕达哥拉斯四元组
- mysql - 部分匹配号字段
- javascript - 如何以编程方式更新 shadow dom 内的输入?
- sharepoint - 有没有办法收集附加到共享点列表中项目的第一个文件?
- windows - 詹金斯切断批处理脚本中的参数列表
- mysql - 从 SELECT 语句执行函数时,存储函数内的临时表是否会多次构建?
- qt5 - QBS 配置文件不会随时保存和更新
- r - 来自单个组的 dplyr sample_n