D3 Horizontales Balkendiagramm X-Achsenbereich kürzer als in Daten über AngularJs

Ich habe ein horizontales Balkendiagramm gezeichnet und es ohne Fehler abgerufen. Mein Problem ist, dass die X-Achse die Frequenz von 0 bis 35 mindestens mit dem aktuellen Datensatz widerspiegeln muss. Nun, was ich sehen kann, ist 0 bis 8. Kann mir jemand den Fehler erklären und helfen, ihn zu korrigieren?D3 Horizontales Balkendiagramm X-Achsenbereich kürzer als in Daten über AngularJs

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 
       data.forEach(function(){ 

        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"); 

        //for rectangles 
        g.selectAll(".bar") 
        .data(data) 
        .enter() 
        .append("rect") 
        .attr("class", "bar") 
        .attr("y", function(d) { return y(d.letter); }) 
        .attr("x", function(d) { return 0; }) 
        .attr("height", y.bandwidth()) 
        .attr("width", function(d) { return x(d.frequency); }); 

     }); 

    </script> 

</body> 

</html>

ERGEBNIS:

Bitte, helfen, so dass ich die richtige Länge der Rechtecke oder Bars in der aktuellen Balkendiagramm erhalten, mit dem entsprechenden Datensatz, den ich es liefern.

Quelle

2016-11-23 Deadpool

Dieser Teil des Codes ist falsch:

data.forEach(function(){  
    x.domain([0, d3.max(data, function(d) { return d.frequency; })]); 
    y.domain(data.map(function(d) { return d.letter; }));  
});

versuchen es mit diesem zu ersetzen:

x.domain([0, d3.max(data, function(d) { return +d.frequency; })]); 
y.domain(data.map(function(d) { return d.letter; }));

Quelle

2016-11-23 09:50:38

Dank Kumpel. Es hat funktioniert – Deadpool

Gern geschehen! Plz, markieren Sie die Antwort als akzeptiert :) –

D3 Horizontales Balkendiagramm X-Achsenbereich kürzer als in Daten über AngularJs

Antwort

Verwandte Themen