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

あなたからの間違いが1つあり、チュートリアルの著者からの間違いが1つあります。

あなたの間違いは、SVGのIDがbasicChart1であり、basicChartではないことです。実際には、チュートリアル：

JavaScriptコードを書くときは、d3セレクタIDをテンプレートと一致するものに変更してください。

作者のミスは少し奇妙である：彼のチュートリアルでは、著者はcreateBasicChart1を呼び出すことはありません。しかし、それは生命維持である場合を除き、もちろん、あなたがそれを呼び出す必要があります：https://jsfiddle.net/5eydu463/

：

ここでは、あなたの更新フィドルです