날짜와의 선형 차트 플로팅 각도로 d3에

나는 d3에서 간단한 차트를 만들려고합니다. 여기서 날짜 (문자열)와 빈도를 플로팅합니다. 그러나 나는 오류가 있습니다. 누군가 나를 도울 수 있습니까?날짜와의 선형 차트 플로팅 각도로 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/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>

** 오류 ** 날짜 x와 y 축과 함께 라인 차트를 만드는 도와

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

하시기 바랍니다, 주파수가 그려져 있습니다. 친절하게 도와주세요.

업데이트 발췌문 :

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

새로운 오류 :

출처

2016-11-21 Deadpool

당신은 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...

, curve에 대한 interpolate을 변경

이

이 필요한 사항을 변경합니다.

또한 제거하려면 tickSubdivide을 제거하십시오.

편집 : 귀하의 피들에 추가 문제가 있습니다. 값은 문자열이지만 숫자 여야합니다. 게다가, 당신이 날짜를 사용한다면, 당신은 그들을 파싱해야 할 것입니다. 여기

는 날짜 사용하지 않고, 당신의 바이올린입니다. https://jsfiddle.net/gerardofurtado/fawe63t8/

출처

2016-11-21 07:45:55

d3.axisLeft (...)를 규모 (...) TICK을 (...)의 방향은 함수가 아닙니다 <<<<.. << 수정 후 새로운 오류가 발생했습니다. 케어 바이올린 ??? – Deadpool

바이올린을 쓰라고 하시겠습니까? –

그래 복사해서 ... 실행됩니다. 마찬가지로, 나는 당신이 말한 내용을 변경하면서 여전히 위의 오류에 직면 해있다. – Deadpool

날짜와의 선형 차트 플로팅 각도로 d3에

답변

관련 문제