NVD3 示例图表未显示

Question

我一定是遗漏了一些基本的东西...我已经复制了一个 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>

Answer 1

您没有要将图表附加到的 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>。

NVD3 示例图表未显示

NVD3 example chart not showing

javascript

html

d3.js

nvd3.js