d3.layout.histogram（）が間違った出力を返す

Question

私はこのコードを、データセットを使用するd3.jsのヒストグラムレイアウトに使用しています。しかし、矩形の開始位置は0ではありません。ヒストグラムのレイアウトごとに、開始位置は常に0にする必要がありますが、何とか0になっていません。

ありがとうございました。

リファレンスチュートリアルビデオ - 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

ヒストグラムの範囲は、データの最小値/最大値である、それは5から始まるので、それを明確に指定することができます0から行くには、.histogram().range([0, d3.max(map)])と呼んでください。

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

}