2016-11-21 111 views
1

我想在d3中製作一個簡單的圖表,其中我繪製日期(字符串)與頻率。但是,我收到錯誤。有人可以幫我嗎?用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/1.12.4/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 width="1000" height="500"></svg> 

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

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

    //custom data 
    var data = [ 
     {x: "2016-01-10", y: "10.02"}, 
     {x: "2016-02-10", y: "15.05"}, 
     {x: "2016-03-10", y: "50.02"}, 
     {x: "2016-04-10", y: "40.01"}, 
     {x: "2016-05-10", y: "10.08"}, 
     {x: "2016-06-10", y: "29.07"}, 
     {x: "2016-07-10", y: "45.02"} 
    ]; 

    var mySVG = d3.select("svg"); 
    var svgWidth = mySVG.attr("width"); 
    var svgHeight = mySVG.attr("height"); 
    var margins = {top: 20,right: 20,bottom: 20,left: 50}; 

    var xRange = d3.scale.linear() 
     .range([margins.left, svgWidth - margins.right]) 
     .domain([d3.min(data, function (d) {return d.x;}), d3.max(data, function (d) {return d.x;}) ]); 

    var yRange = d3.scale.linear() 
     .range([svgHeight - margins.top, margins.bottom]) 
     .domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y;}) ]); 

    var xAxis = d3.svg.axis() 
       .scale(xRange) 
       .tickSize(5) 
       .tickSubdivide(true); 

    var yAxis = d3.svg.axis() 
       .scale(yRange) 
       .tickSize(5) 
       .orient("left") 
       .tickSubdivide(true); 


     mySVG.append("svg:g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + (svgHeight - margins.bottom) + ")") 
      .call(xAxis); 

     mySVG.append("svg:g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(" + (margins.left) + ",0)") 
      .call(yAxis); 

     var lineFunc = d3.svg.line() 
     .x(function (d) { 
      return xRange(d.x); 
     }) 
     .y(function (d) { 
      return yRange(d.y); 
     }) 
     .interpolate('linear'); 

     mySVG.append("svg:path") 
     .attr("d", lineFunc(data)) 
     .attr("stroke", "blue") 
     .attr("stroke-width", 2) 
     .attr("fill", "none"); 
    }); 

</script> 

</body> 

</html> 

**錯誤:**

enter image description here

 var xRange = d3.scale.linear() <<<<< Error line 

請幫我製作線圖與x和y軸與沿日期並繪製頻率。請幫忙。

更新的摘要:

<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/1.12.4/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 width="1000" height="500"></svg> 

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

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

    //custom data 
    var data = [ 
     {x: "2016-01-10", y: "10.02"}, 
     {x: "2016-02-10", y: "15.05"}, 
     {x: "2016-03-10", y: "50.02"}, 
     {x: "2016-04-10", y: "40.01"}, 
     {x: "2016-05-10", y: "10.08"}, 
     {x: "2016-05-10", y: "29.07"}, 
     {x: "2016-05-10", y: "45.02"} 
    ]; 

    var mySVG = d3.select("svg"); 
    var svgWidth = mySVG.attr("width"); 
    var svgHeight = mySVG.attr("height"); 
    var margins = {top: 20,right: 20,bottom: 20,left: 50}; 

    var xRange = d3.scaleLinear() 
     .range([margins.left, svgWidth - margins.right]) 
     .domain([d3.min(data, function (d) {return d.x;}), d3.max(data, function (d) {return d.x;}) ]); 

    var yRange = d3.scaleLinear() 
     .range([svgHeight - margins.top, margins.bottom]) 
     .domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y;}) ]); 

    var xAxis = d3.axisBottom(xRange) 
       .scale(xRange) 
       .tickSize(5); 

    var yAxis = d3.axisLeft(yRange) 
       .scale(yRange) 
       .tickSize(5) 
       .orient("left"); 


     mySVG.append("svg:g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + (svgHeight - margins.bottom) + ")") 
      .call(xAxis); 

     mySVG.append("svg:g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(" + (margins.left) + ",0)") 
      .call(yAxis); 

     var lineFunc = d3.line() 
     .x(function (d) { 
      return xRange(d.x); 
     }) 
     .y(function (d) { 
      return yRange(d.y); 
     }) 
     .curve(d3.curveLinear); 

     mySVG.append("svg:path") 
     .attr("d", lineFunc(data)) 
     .attr("stroke", "blue") 
     .attr("stroke-width", 2) 
     .attr("fill", "none"); 
    }); 

</script> 

</body> 

</html> 

新的錯誤:

enter image description here

回答

1

您使用D3 4.x版,不老V3。因此,你必須修改你的代碼。

這些是必要的修改:

var xRange = d3.scaleLinear()//keep the domain and range 

var yRange = d3.scaleLinear()//keep the domain and range 

var xAxis = d3.axisBottom(xRange) 
    .tickSize(5); 

var yAxis = d3.axisLeft(yRange) 
    .tickSize(5); 

var lineFunc = d3.line()//etc... 

對於線發生器,更改爲interpolatecurve

另外,擺脫tickSubdivide

編輯:你有你的小提琴中的其他問題:值是字符串,但他們應該是數字。除此之外,如果你使用日期,你必須解析它們。

這是你的小提琴,而無需使用日期:https://jsfiddle.net/gerardofurtado/fawe63t8/

+0

d3.axisLeft(...)規模(...)tickSize(...)東方不是一個函數<<<<。 <<修正後的新錯誤。小心小提琴? – Deadpool

+0

你在問我寫小提琴嗎? –

+0

是的,它複製它...所以它運行。因爲,我仍然面臨上述錯誤,因爲你說過的修改。 – Deadpool