NVD3散布図が表示されない

Question

私は自分自身でnvd3散布図の例を試そうとしていました。私は何のエラーも起こっていませんが、グラフにデータが入力されていません。

画面にアクセスしようとすると空白のWebページが表示されます。私の既存の他のコンテンツもなくなってしまった。誰も散布図を取得して実行することができましたか？実際の例を分かち合うことができたら、本当にありがたいです。

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

    }); 

Answer 1

あなたのグラフィックはどれくらいシンプルであっても、表示されません。 多分、Pythonの新しいバージョンと互換性がないかもしれません。 私はpythonを使用しています。

Googleの開発ツールによれば、コードが生成され、すべての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); 
});