javascript - Nvd3 - 尽管添加了所有外部资源，散点图仍不会加载

Question

请查看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
    });
}

你能告诉我这里缺少什么吗？我已经按照教程所述添加了所有资源。

Answer 1

您犯了一个错误，教程作者也犯了一个错误。

您的错误是 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/