请查看this JSFIDDLE 。我正在尝试关注a tutorial在 NVD3.js 中创建一个非常基本的散点图,但无济于事。
function createBasicChart1(){
var chart;
nv.addGraph(function(){
//Create chart
chart = nv.models.scatterChart()
.showLegend(false) // Remove legend (will put it back later)
.showDistX(true) // Show X axis
.showDistY(true) // Show Y axis
.useVoronoi(false) // For now, disable hovering on points
.color(d3.scale.category10().range()) // Colormap
.duration(500); // Fade in duration
// Generate toy data
data = [{key: "", values:[{x:0,y:0},{x:1,y:1}, {x:3, y:3}, {x:3, y:10}]}];
//Add chart to page
d3.select("#basicChart1").datum(data).call(chart)
// Register chart with window resize event
nv.utils.windowResize(chart.update);
return chart
});
}
你能告诉我这里缺少什么吗?我已经按照教程所述添加了所有资源。
最佳答案
您犯了一个错误,教程作者也犯了一个错误。
您的错误是 SVG 的 ID 是 basicChart1
,而不是 basicChart
。实际上,它在教程上:
When you write the javascript code, make sure to change the d3 selector id to a one that will match with the template.
作者的错误有点奇怪:在他的教程中,作者从未调用createBasicChart1
。但是,当然,除非它是 IIFE,否则您必须调用它:
createBasicChart1()
这是您更新的 fiddle :https://jsfiddle.net/5eydu463/
关于javascript - Nvd3 - 尽管添加了所有外部资源,散点图仍不会加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42902988/