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

Question

请查看 this JSFIDDLE. I'm trying to follow 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/

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

Nvd3 - scatter chart won't load despite adding all external resources

javascript

charts

svg

d3.js

nvd3.js