NVD3 散点图未显示答案

【问题标题】：NVD3 scatter plot not showingNVD3 散点图未显示
【发布时间】：2017-08-09 11:41:49
【问题描述】：

我正在尝试自己尝试 nvd3 散点图示例。我没有收到任何错误，但图表没有填充。

当我尝试访问屏幕时，我得到了一个空白网页。甚至我现有的其他内容都没有了。有没有人设法让散点图启动并运行？如果您能分享一个工作示例，我将不胜感激。

#html
<script>            
    $(document).ready(function(){           

        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());   

  //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;
}

    });

【问题讨论】：

尝试将您的代码放入fiddle。它易于调试并为您提供帮助。
听起来你可能有一个 JS 错误。您在控制台中看到了什么？同意 JSFiddle 或 Plunkr 会有所帮助。

标签： python django d3.js nvd3.js scatter-plot

【解决方案1】：

无论您的图形多么简单，它只是不显示。也许它只是与新版本的python不兼容。我正在使用 python 3.6

根据谷歌的开发者工具，它生成代码，所有的 css 和 j 工作正常。但是，它仍然没有显示。

data_piechart_container=[
    {"values": [
      {"label": "Apple", "value": 52}, 
      {"label": "Apricot", "value": 48}, 
      {"label": "Avocado", "value": 160}, 
      {"label": "Banana", "value": 94}, 
      {"label": "Boysenberries", "value": 75}, 
      {"label": "Blueberries", "value": 71}, 
      {"label": "Dates", "value": 490},
      {"label": "Grapefruit", "value": 82}, 
      {"label": "Kiwi", "value": 46}, 
      {"label": "Lemon", "value": 17}
     ], "key": "Serie 1"}];

nv.addGraph(function() {
    var chart = nv.models.pieChart();
    chart.margin({top: 30, right: 60, bottom: 20, left: 60});
    var datum = data_piechart_container[0].values;

    chart.color(d3.scale.category20().range());

chart.tooltipContent(function(key, y, e, graph) {
    var x = String(key);
        var y = String(graph.point.y);
        tooltip_str = '<center><b>'+x+'</b></center>' + y;
        return tooltip_str;
    });
    chart.showLabels(true);

        chart.donut(false);

chart.showLegend(true);

chart
    .x(function(d) { return d.label })
    .y(function(d) { return d.value });
chart.height(450);

d3.select('#piechart_container svg')
    .datum(datum)
    .transition().duration(500)
    .attr('height', 450)
    .call(chart);
});

【讨论】：