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

【问题标题】：Nvd3 - scatter chart won't load despite adding all external resourcesNvd3 - 尽管添加了所有外部资源，但散点图不会加载
【发布时间】：2017-08-11 16:40:47
【问题描述】：

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

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

【问题讨论】：

标签： javascript d3.js svg charts nvd3.js

【解决方案1】：

你一个错误，教程作者一个错误。

您的错误是 SVG 的 ID 是 basicChart1，而不是 basicChart。其实教程里有：

当您编写 javascript 代码时，请确保将 d3 选择器 ID 更改为与模板匹配的 ID。

作者的错误有点奇怪：在他的教程中，作者从不调用createBasicChart1。但是，当然，除非它是 IIFE，否则您必须调用它：

createBasicChart1()

这是你更新的小提琴：https://jsfiddle.net/5eydu463/

【讨论】：