d3.layout.histogram() gibt falsche Ausgabe zurück

Question

Ich verwende diesen Code für ein Histogrammlayout für d3.js, das den Datensatz verwendet. Die Startposition der Rechtecke ist jedoch nicht 0. Wie beim Histogrammlayout sollte die Startposition immer 0 sein, aber irgendwie bekomme ich nicht 0. Hilf mir bitte, das Zeigen zu zeigen, wenn es Fehler gibt.

Danke. Tutorial-Video

Referenz - https://youtu.be/0CZ7-f9wXiM?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p

JSFiddle - https://jsfiddle.net/tewjyfed/

create(dataset);   


function create(data) {   
    var map = data.map(function(i) { return parseInt(i.skill) }); 
    var histogram = d3.layout.histogram() 
         .bins(7) 
         (map); 

    var yscale = d3.scale.linear() 
        .domain([0, d3.max(histogram.map(function(i) { return i.length }))]) 
        .range([0, height]); 

    var xscale = d3.scale.linear() 
        .domain([0, d3.max(map)]) 
        .range([0, width]); 

    var axis = d3.svg.axis() 
        .scale(xscale) 
        .orient('bottom'); 

    var bar = svg.selectAll('bar') 
       .data(histogram) 
       .enter() 
       .append('g'); 

    bar.append('rect') 
     .attr('x', function(d) { return xscale(d.x)}) 
     .attr('y', function(d) { return height - yscale(d.y) }) 
     .attr('width', function(d) { return xscale(d.dx) }) 
     .attr('height', function(d) { return yscale(d.y)}) 
     .attr('fill', 'lightsteelblue') 
     .attr('stroke', 'steelblue'); 

     svg.append('g') 
     .attr('transform', 'translate(0, '+height +')')      
     .call(axis); 
} 

Answer 1

standardmäßig der Bereich des Histogramms ist die min/max der Daten, so dass es von 5. beginnt können Sie es explizit angeben obwohl von 0 zu gehen, indem Sie .histogram().range([0, d3.max(map)]) anrufen.

jsfiddle: https://jsfiddle.net/rm9tozcg/

var width = 500; 
var height = 500; 
var padding = 50; 
var dataset = [ 
{"name": "a", "skill": 60}, 
{"name": "b", "skill": 65}, 
{"name": "c", "skill": 23}, 
{"name": "d", "skill": 47}, 
{"name": "e", "skill": 38}, 
{"name": "f", "skill": 27}, 
{"name": "g", "skill": 24}, 
{"name": "h", "skill": 16}, 
{"name": "i", "skill": 36}, 
{"name": "j", "skill": 57}, 
{"name": "k", "skill": 77}, 
{"name": "l", "skill": 5}, 
{"name": "m", "skill": 46}, 
{"name": "n", "skill": 29}, 
{"name": "o", "skill": 55}, 
{"name": "p", "skill": 68}, 
{"name": "q", "skill": 40}, 
{"name": "r", "skill": 21}, 
{"name": "s", "skill": 14}, 
{"name": "t", "skill": 5}, 
{"name": "u", "skill": 63}, 
{"name": "v", "skill": 99}, 
{"name": "w", "skill": 89}, 
{"name": "x", "skill": 77}, 
{"name": "y", "skill": 12}, 
{"name": "z", "skill": 90} 
]; 



var svg = d3.select("body").append("svg") 
     .attr("width", width + 100) 
     .attr("height", height + padding) 
      .append("g") 
      .attr('transform', 'translate(20,0)') 

    create(dataset);   


    function create(data) {   
     var map = data.map(function(i) { return parseInt(i.skill) }); 
     var maxValue = d3.max(map); 

     var histogram = d3.layout.histogram() 
          .range([0, maxValue]) 
          .bins(7) 
          (map); 

     var yscale = d3.scale.linear() 
         .domain([0, d3.max(histogram.map(function(i) { return i.length }))]) 
         .range([0, height]); 

     var xscale = d3.scale.linear() 
         .domain([0, maxValue]) 
         .range([0, width]); 

     var axis = d3.svg.axis() 
         .scale(xscale) 
         .orient('bottom'); 

     var bar = svg.selectAll('bar') 
        .data(histogram) 
        .enter() 
        .append('g'); 

     bar.append('rect') 
      .attr('x', function(d) { return xscale(d.x)}) 
      .attr('y', function(d) { return height - yscale(d.y) }) 
      .attr('width', function(d) { return xscale(d.dx) }) 
      .attr('height', function(d) { return yscale(d.y)}) 
      .attr('fill', 'lightsteelblue') 
      .attr('stroke', 'steelblue'); 

      svg.append('g') 
      .attr('transform', 'translate(0, '+height +')')      
      .call(axis); 

}