D3線圖出錯並且未得到繪圖

我正在爲一組關於字母與頻率的數據製作線圖。我已經爲x和y軸做了正確的代碼，但是在繪製線時我出現錯誤，無法繪製線圖。有人可以幫助解決這個問題嗎？D3線圖出錯並且未得到繪圖

片段：

<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：

新的錯誤：

來源

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 ...看看你的線發生器：你有兩行不同的x。如果你不小心，你會混合它們。

來源

2016-11-23 10:32:54

d3.min.js：3錯誤：屬性d：預期編號，「MNaN，NaNLNaN，NaNL ...」。 <--------------現在面臨這個錯誤 – Deadpool

因爲你的數據有'頻率'和'字母'。檢查新的編輯。此外，你有字符串，而不是數字。 –

如果你想使用xScale和yScale，你需要定義這些函數。下面的語法中給出（忽略的值）：

下面碼是用於這些功能用於在一個範圍內，以限定值的映射到在其它數值範圍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線圖出錯並且未得到繪圖

回答

相關問題