NVD3示例圖表不顯示

我必須缺少一些基本的東西......我已經複製了一個nvd3示例的確切代碼，即使我沒有收到任何錯誤消息，我也得到一個空白頁面。當我在控制檯中鍵入「nv」或「d3」時，nvd3和d3庫都顯示出來，所以我認爲我沒有錯誤地調用它們。NVD3示例圖表不顯示

<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>

來源

2015-03-19 bkauder

你還沒有一個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>

唯一的區別是增加了<div id="chart"><svg></svg></div>之前你script元素。

來源

2015-03-19 04:09:46

NVD3示例圖表不顯示

回答

相關問題