Plotting Liniendiagramm mit Datum vs Frequenz in d3 von eckigen

Ich versuche, ein einfaches Diagramm in d3 zu machen, wo ich Datum (als String) vs Frequenz darstelle. Aber ich bekomme Fehler. Kann mir jemand helfen?Plotting Liniendiagramm mit Datum vs Frequenz in d3 von eckigen

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>

** Fehler: **

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

Bitte, mir helfen, das Liniendiagramm bei der Herstellung zusammen mit x- und y-Achse mit Datum und Häufigkeit auf ihnen aufgetragen. Bitte, helfen Sie mit.

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

New Fehler:

Quelle

2016-11-21 Deadpool

Sie d3 v4.x verwenden, nicht die alte v3. Daher müssen Sie Ihren Code ändern.

Dies sind die notwendigen Änderungen:

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

Für den Liniengenerator, ändern interpolate für curve.

Auch loswerden tickSubdivide.

EDIT: Sie haben zusätzliche Probleme in Ihrer Geige: die Werte sind Strings, aber sie sollten Zahlen sein. Außerdem müssen Sie, wenn Sie Daten verwenden, diese analysieren.

Hier ist Ihre Geige, ohne die Daten zu verwenden. https://jsfiddle.net/gerardofurtado/fawe63t8/

Quelle

2016-11-21 07:45:55

d3.axisLeft (...) Skala (...) Ticksize (...) orientieren keine Funktion ist <<<<.. << Neuer Fehler nach Korrekturen. Kümmere dich um eine Geige ??? – Deadpool

Bitten Sie mich, eine Geige zu schreiben? –

Ja, kopiere es ... so läuft es. Da ich immer noch über dem Fehler stehe, der Änderungen vornimmt, sagten Sie. – Deadpool

Plotting Liniendiagramm mit Datum vs Frequenz in d3 von eckigen

Antwort

Verwandte Themen