Question

我尝试运行此code：

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.

我错过了什么？

Answer 1

查看他们demo page的来源。你会在顶部注意到：

<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>

演示代码取决于您首先加载这些库。

Answer 2

您必须先运行npm init，然后才能安装任何node_modules。您的错误是抱怨您没有创建package.json文件 - 正在运行npm init将指导您创建该文件。之后，您将能够npm install任何包裹。

ReferenceError：未定义d3

2 个答案: