ReferenceError:d3 未定义
2017-10-29
3697
我尝试运行此 代码 :
var gieStainColor = {
gpos100: 'rgb(0,0,0)',
gpos: 'rgb(0,0,0)',
gpos75: 'rgb(130,130,130)',
gpos66: 'rgb(160,160,160)',
gpos50: 'rgb(200,200,200)',
gpos33: 'rgb(210,210,210)',
gpos25: 'rgb(200,200,200)',
gvar: 'rgb(220,220,220)',
gneg: 'rgb(255,255,255)',
acen: 'rgb(217,47,39)',
stalk: 'rgb(100,127,164)',
select: 'rgb(135,177,255)'
}
var drawCircos = function (error, GRCh37, cytobands, data) {
var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
var circos = new Circos({
container: '#chordsChart',
width: width,
height: width
})
cytobands = cytobands.map(function (d) {
return {
block_id: d.chrom,
start: parseInt(d.chromStart),
end: parseInt(d.chromEnd),
gieStain: d.gieStain,
name: d.name
}
})
data = data.map(function (d) {
return {
source: {
id: d.source_id,
start: parseInt(d.source_breakpoint) - 2000000,
end: parseInt(d.source_breakpoint) + 2000000
},
target: {
id: d.target_id,
start: parseInt(d.target_breakpoint) - 2000000,
end: parseInt(d.target_breakpoint) + 2000000
}
}
})
circos
.layout(
GRCh37,
{
innerRadius: width/2 - 80,
outerRadius: width/2 - 40,
labels: {
radialOffset: 70
},
ticks: {
display: true,
labelDenominator: 1000000
},
events: {
'click.demo': function (d, i, nodes, event) {
console.log('clicked on layout block', d, event)
}
}
}
)
.highlight('cytobands', cytobands, {
innerRadius: width/2 - 80,
outerRadius: width/2 - 40,
opacity: 0.3,
color: function (d) {
return gieStainColor[d.gieStain]
},
tooltipContent: function (d) {
return d.name
}
})
.chords(
'l1',
data,
{
radius: function (d) {
if (d.source.id === 'chr1') {
return 0.5
} else {
return null
}
},
logScale: false,
opacity: 0.7,
color: '#ff5722',
tooltipContent: function (d) {
return '<h3>' + d.source.id + ' ➤ ' + d.target.id + ': ' + d.value + '</h3><i>(CTRL+C to copy to clipboard)</i>'
},
events: {
'mouseover.demo': function (d, i, nodes, event) {
console.log(d, i, nodes, event.pageX)
}
}
}
)
.render()
}
d3.queue()
.defer(d3.json, './data/GRCh37.json')
.defer(d3.csv, './data/cytobands.csv')
.defer(d3.csv, './data/fusion-genes.csv')
.await(drawCircos)
但我得到的是:
/home/mictadlo/projects/circos/chords.js:107
d3.queue()
^
ReferenceError: d3 is not defined
at Object.<anonymous> (/home/mictadlo/projects/circos/chords.js:107:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:383:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:496:3
在安装过程中我收到此警告:
npm install --save circos
npm WARN enoent ENOENT: no such file or directory, open '/home/mictadlo/projects/circos/package.json'
npm WARN circos No description
npm WARN circos No repository field.
npm WARN circos No README data
npm WARN circos No license field.
我错过了什么?
2个回答
查看其 演示页面 的源代码。您会在顶部注意到:
<script src='../dist/circos.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'></script>
演示代码依赖于您首先加载这些库。
Mark
2017-10-29
您需要先运行
npm init
,然后才能安装任何
node_modules
。您的错误提示您没有创建
package.json
文件 - 运行
npm init
将引导您创建该文件。之后,您将能够
npm install
任何软件包。
Parker Ziegler
2017-10-29