NVD3示例图表未显示

NVD3 example chart not showing

本文关键字：显示 例图 NVD3      更新时间：2023-09-26

我一定缺少一些基本的东西。。。我已经复制了nvd3示例的确切代码，尽管我没有收到任何错误消息，但我得到的是一个空白页面。当我在控制台中键入"nv"或"d3"时，nvd3和d3库都会显示出来，所以我认为我没有错误地调用它们。

<html>
<body> 
<link href="nv.d3.css" rel="stylesheet" type="text/css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="nv.d3.js"></script> 
<script type='text/javascript'>
nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)    //showDist, when true, will display those little distribution lines on the axis.
                .showDistY(true)
                .color(d3.scale.category10().range());
  //Configure how the tooltip looks.
  chart.tooltipContent(function(key) {
      return '<h3>' + key + '</h3>';
  });
  //Axis settings
  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));

  var myData = randomData(4,40);
  d3.select('#chart svg')
      .datum(myData)
      .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
});

/**************************************
 * Simple test data generator
 */
function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();
  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });
    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random()
      , y: random()
      , size: Math.random()   //Configure the size of each scatter point
      , shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle"  //Configure the shape of each scatter point.
      });
    }
  }
  return data;
}
</script>
</body>
</html>

您没有一个DOM元素来附加图表。您select '#chart svg'，但HTML中没有匹配的元素，因此图表永远不会显示，因为它不会插入到DOM中。

这将起作用。。。

<html>
<body> 
<link href="nv.d3.css" rel="stylesheet" type="text/css">
<div id="chart"><svg></svg></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="nv.d3.js"></script> 
<script type='text/javascript'>
nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)    //showDist, when true, will display those little distribution lines on the axis.
                .showDistY(true)
                .color(d3.scale.category10().range());
  //Configure how the tooltip looks.
  chart.tooltipContent(function(key) {
      return '<h3>' + key + '</h3>';
  });
  //Axis settings
  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));

  var myData = randomData(4,40);
  d3.select('#chart svg')
      .datum(myData)
      .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
});

/**************************************
 * Simple test data generator
 */
function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();
  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });
    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random()
      , y: random()
      , size: Math.random()   //Configure the size of each scatter point
      , shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle"  //Configure the shape of each scatter point.
      });
    }
  }
  return data;
}
</script>
</body>
</html>

唯一的区别是在script元素之前添加了<div id="chart"><svg></svg></div>。

相关文章：