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。实际上，它是在教程上：

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

作者的错误有点奇怪：在他的教程中，作者从不打电话给createBasicChart1。但是，当然，除非是IIFE，否则你必须称之为：

createBasicChart1()

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

尽管添加了所有外部资源，Nvd3 - 散点图仍然无法加载

1 个答案: