javascript - 错误 : attribute d: Expected number, "….43564672524005LNaN,NaNZ"

Question

我尝试运行 circosJS但我的数据出现以下错误:

1 "datum" "unknown parent id" {line: 1, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 2, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 3, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 4, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 5, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 6, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 7, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 8, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 9, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:19573 1 "datum" "unknown parent id" {line: 10, value: undefined, header: "sourceId", layoutSummary: {…}}
circos.js:3998 Error: <path> attribute d: Expected number, "….43564672524005LNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayout @ circos.js:7440
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
1365circos.js:3998 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayout @ circos.js:7440
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
circos.js:3998 Error: <path> attribute d: Expected number, "….72942341610366LNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayoutLabels @ circos.js:7365
renderLayout @ circos.js:7447
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
1365circos.js:3998 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".
(anonymous) @ circos.js:3998
selection_each @ circos.js:3963
selection_attr @ circos.js:4020
renderLayoutLabels @ circos.js:7365
renderLayout @ circos.js:7447
render @ circos.js:7017
render @ circos.js:205
drawCircos @ chords.js:83
_call @ d3-queue.js:42
maybeNotify @ d3-queue.js:118
(anonymous) @ d3-queue.js:89
(anonymous) @ d3.js:10999
call @ d3.js:668
respond @ d3.js:10924
XMLHttpRequest.send (async)
send @ d3.js:11001
get @ d3.js:10981
(anonymous) @ d3.js:11042
start @ d3-queue.js:72
poke @ d3-queue.js:56
defer @ d3-queue.js:33
(anonymous) @ chords.js:88
1366circos.js:3998 Error: <g> attribute transform: Expected number, "rotate(NaN)translate(14…".

这是chord.js代码:

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, data) {
  var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
  var circos = new Circos({
    container: '#chordsChart',
    width: width,
    height: width
  })

  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)
        }
      }
    }
    )
    .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/circle.json')
  .defer(d3.json, './data/data.json')
  .await(drawCircos)

这是circle.json:

[
  {
    "color": "#996600", 
    "id": "chr03", 
    "len": "35020413", 
    "label": "chr03"
  }, 
  {
    "color": "#666600", 
    "id": "tig00007144", 
    "len": 40868, 
    "label": "tig00007144"
  }
]

这是data.json

[
  {
    "source": {
      "start": 30824, 
      "end": 23113, 
      "id": "tig00007144"
    }, 
    "target": {
      "start": 33203431, 
      "end": 33211142, 
      "id": "chr03"
    }
  }, 
  {
    "source": {
      "start": 5564, 
      "end": 1, 
      "id": "tig00007144"
    }, 
    "target": {
      "start": 33172892, 
      "end": 33178421, 
      "id": "chr03"
    }
  }, 
  {
    "source": {
      "start": 36357, 
      "end": 30947, 
      "id": "tig00007144"
    }, 
    "target": {
      "start": 33211132, 
      "end": 33216579, 
      "id": "chr03"
    }
  }
  ]

这是index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Circos</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="images/android-desktop.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
    <link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="shortcut icon" href="images/favicon.png">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.deep_purple-pink.min.css">
    <link rel="stylesheet" href="styles.css">

    <script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.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>
  </head>
  <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
          <a href="#chords" class="mdl-layout__tab is-active">Chords</a>
          <a href="#heatmap" class="mdl-layout__tab">Heatmap</a>
          <a href="#highlight" class="mdl-layout__tab">Highlight</a>
          <a href="#histogram" class="mdl-layout__tab">Histogram</a>
          <a href="#line" class="mdl-layout__tab">Line</a>
          <a href="#scatter" class="mdl-layout__tab">Scatter</a>
          <a href="#stack" class="mdl-layout__tab">Stack</a>
          <a href="#text" class="mdl-layout__tab">Text</a>
        </div>
      </header>
      <main class="mdl-layout__content">
        <div class="mdl-layout__tab-panel is-active" id="chords">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Chords</h4>
                <div id='chordsChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="line">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Line</h4>
                <div id='lineChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="scatter">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Scatter</h4>
                <div id='scatterChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="stack">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Stack</h4>
                <div id='stackChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="text">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Text</h4>
                <div id='textChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="highlight">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Highlight</h4>
                <div id='highlightChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="heatmap">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Heatmap</h4>
                <div id='heatmapChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="histogram">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Histogram</h4>
                <div id='histogramChart'></div>
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read the documentation</a>
              </div>
            </div>
          </section>
        </div>
      </main>
    </div>
    <script src="//code.getmdl.io/1.3.0/material.min.js"></script>
    <script src='./chords.js'></script>

  </body>
</html>

我错过了什么？

Answer 1

解决方案是删除 circle.json 中的引号
“长度”:“35020413”，
改成:
“长度”:35020413，