Javascript 如何参考数据_Javascript_Initialization

Javascript 如何参考数据

javascript

Javascript 如何参考数据,javascript,initialization,Javascript,Initialization,漂亮干净。。。但这并不明显，也不是说教。如何引用这些数据 var myData = function() { return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) { return { key: 'Stream' + i, values: data }; }); } 在此代码片段演示中： nv.addGraph(function() { var char

漂亮干净。。。但这并不明显，也不是说教。如何引用这些数据

var myData = function() {
  return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
    return {
      key: 'Stream' + i,
      values: data
    };
  });
}

在此代码片段演示中：

nv.addGraph(function() {
    var chart = nv.models.multiBarChart();

    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#chart svg')
        .datum(data())  // how to put MyData here?
        .transition().duration(500)
        .call(chart)
        ;

    nv.utils.windowResize(chart.update);

    return chart;
});

如何将myData置于.datumdata

笔记这是一个完整的HTML5，用作演示和bug：

<!DOCTYPE html>

<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <title>NVD3 DEMO1</title>
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet">

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>

  <style>
  #chart svg {  height: 400px; }
  </style>

<script>

/////////// fake data generation:

/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}

function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}

////////////////////////////////////////
var myData = function() {
  return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
    return {
      key: 'Stream' + i,
      values: data
    };
  });
};

function ONLOAD() {

    nv.addGraph(function() {
        var chart = nv.models.multiBarChart();
        chart.xAxis
            .tickFormat(d3.format(',f'));
        chart.yAxis
            .tickFormat(d3.format(',.1f'));
        d3.select('#chart svg')
            .datum( myData() )  // old datum(data())
            .transition().duration(500)
            .call(chart)
            ;
        nv.utils.windowResize(chart.update);
        return chart;
    });


} // ONLOAD

</script>
</head>

<body onload="ONLOAD()">

<h2>NVD3 DEMO1</h2>

<div id="chart">
  <svg></svg>
</div>

</body>
</html>

我仔细研究了这件事，发现问题出在D3版本，它需要v3而不是v5

我将您的示例更改为：

<!DOCTYPE html>

<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <title>NVD3 DEMO1</title>
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet">

  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>

  <style>
  #chart svg {  height: 400px; }
  </style>

<script>

/////////// fake data generation:

/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}

function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}

////////////////////////////////////////
var myData = function() {
  return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
    return {
      key: 'Stream' + i,
      values: data
    };
  });
};

function ONLOAD() {

    nv.addGraph(function() {
        var chart = nv.models.multiBarChart();
        chart.xAxis
            .tickFormat(d3.format(',f'));
        chart.yAxis
            .tickFormat(d3.format(',.1f'));
        d3.select('#chart svg')
            .datum( myData() )  // old datum(data())
            .transition().duration(500)
            .call(chart)
            ;
        nv.utils.windowResize(chart.update);
        return chart;
    });


} // ONLOAD

</script>
</head>

<body onload="ONLOAD()">

<h2>NVD3 DEMO1</h2>

<div id="chart">
  <svg></svg>
</div>

</body>
</html>

而且效果很好。

.datummyData？。。。我丢失了什么吗？@briosheje.datum myData的错误是未捕获的类型错误：a.dispatch.render\u start不是函数。同样的。datum myData。嗨，阿图尔，谢谢你的建议，你能用一行我必须更改的行来准确地表达解决方案吗？你可以测试。尝试复制/粘贴我在问题中发布的完整HTML代码，并测试您的解决方案。@PeterKrauss检查新答案。