D3折れ線グラフにエラーが発生してプロットされない

文字と周波数のデータセットの折れ線グラフを作成しています。 x軸とy軸に対して適切なコードを作成しましたが、線をプロットしているうちにエラーが発生し、線グラフをプロットできません。誰かが問題を解決するのに役立つことができますかD3折れ線グラフにエラーが発生してプロットされない

SNIPPET：

<html> 

<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <svg></svg> 

    <script> 

     //module declaration 
     var app = angular.module('myApp',[]); 

     //Controller declaration 
     app.controller('myCtrl',function($scope){ 

      $scope.svgWidth = 800;//svg Width 
      $scope.svgHeight = 500;//svg Height 

      //Data in proper format 
      var data = [ 
        {"letter": "A","frequency": "5.01"}, 
        {"letter": "B","frequency": "7.80"}, 
        {"letter": "C","frequency": "15.35"}, 
        {"letter": "D","frequency": "22.70"}, 
        {"letter": "E","frequency": "34.25"}, 
        {"letter": "F","frequency": "10.21"}, 
        {"letter": "G","frequency": "7.68"}, 
      ]; 

       //removing prior svg elements ie clean up svg 
       d3.select('svg').selectAll("*").remove(); 

       //resetting svg height and width in current svg 
       d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight); 

       //Setting up of our svg with proper calculations 
       var svg = d3.select("svg"); 
       var margin = {top: 20, right: 20, bottom: 30, left: 40}; 
       var width = svg.attr("width") - margin.left - margin.right; 
       var height = svg.attr("height") - margin.top - margin.bottom; 

       //Plotting our base area in svg in which chart will be shown 
       var g = svg.append("g"); 



       //shifting the canvas area from left and top 
       g.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

       //X and Y scaling 
       var x = d3.scaleLinear().rangeRound([0, width]); 
       var y = d3.scaleBand().rangeRound([height, 0]).padding(0.4); 

       //Feeding data points on x and y axis 
       x.domain([0, d3.max(data, function(d) { return +d.frequency; })]); 
       y.domain(data.map(function(d) { return d.letter; })); 

       //Final Plotting 

       //for x axis 
       g.append("g") 
        .attr("transform", "translate(0," + height + ")") 
        .call(d3.axisBottom(x)); 

       //for y axis 
       g.append("g") 
        .call(d3.axisLeft(y)) 
        .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", "0.71em") 
        .attr("text-anchor", "end"); 


       //the line function for path 
       var lineFunction = d3.line() 
        .x(function(d) {return xScale(d.x); }) 
        .y(function(d) { return yScale(d.y); }) 
        .curve(d3.curveLinear); 

       //defining the lines 
       var path = g.append("path"); 

       //plotting lines 
       path 
        .attr("d", lineFunction(data)) 
        .attr("stroke", "blue") 
        .attr("stroke-width", 2) 
        .attr("fill", "none"); 

     }); 

    </script> 

</body> 

</html>

ERROR：

NEW ERROR：

出典

2016-11-23 Deadpool

ここで、xScale関数を定義しましたか？それは図書館からですか？ – echonax

コンソールを見てください：xScaleまたはyScaleがありません。

ので、ラインジェネレータは、次のようになります。それ以外にも

var lineFunction = d3.line() 
    .x(function(d) {return x(d.frequency); }) 
    .y(function(d) { return y(d.letter); }) 
    .curve(d3.curveLinear);

、frequencyは、文字列ではなく、番号です。それで、数字に変換するのは良い考えです。あなたのdata変数の後にこの権利を書く：

data.forEach(function(d){ 
    d.frequency = +d.frequency; 
});

注：それはあなたのラインジェネレータを見て... xScale、yAxis、chartLegendまたはformatNumberのような説明的な名前で、適切にあなたの変数名を定義するとよいでしょう：あなたが持っています2つの異なるxを1行に入れます。気をつけなければ、それらを混ぜ合わせます。

出典

2016-11-23 10:32:54

d3.min.js：3Error：属性d：予想される番号 "MNaN、NaNLNaN、NaNL ..."。 <--------------今このエラーに直面する – Deadpool

あなたのデータは 'frequency'と' letters'を持っているからです。新しい編集を確認してください。また、数字ではなく文字列があります。 –

xScaleとyScaleを使用する場合は、これらの関数を定義する必要があります。構文は、（値を無視する）について説明されている：コードの下

は、これらの機能は、他の範囲内の値に1つの範囲内の値のマッピングを定義するために使用されているD3バージョン3

me.xscale = d3.scale.linear() // for horizontal distances if using for 2D 
     .domain([0, 500]) 
     .range([0, 700]); 

me.yscale = d3.scale.linear() // for vertical distances if using for 2D 
     .domain([0, 600]) 
     .range([0, 200]);

するためのものです。

例：ブラウザ画面にグラフを描画するとします。そして、ブラウザ画面の幅500pxをグラフ上で500とみなす必要があるとします。上記のようにxScaleを定義する必要があります。この場合、この関数はドメイン（0-500）のすべての値を範囲（0-700）の一意の値にマッピングし、その逆も同様です。

出典

2016-11-23 10:44:17 Harshal

v4にはscale.linear（）はありません。 –

よろしいですか？私はそれを知らなかった。ご報告いただきありがとうございます。 v3を使用しているユーザーの回答にメモを追加しました。なぜ、downvote、あなたは単に報告することができます。 – Harshal

なぜ私はdownvoterだと思いますか？ –

D3折れ線グラフにエラーが発生してプロットされない

答えて

関連する問題