バーの間に隙間がない理由D3 js

私はd3 jsを学んでいます。私は図書館について素晴らしい本を見つけました。しかし、私はここで 4にバージョン3からのコード例を変換するために必要な、私は理解したようバージョンここでは4バーの間に隙間がない理由D3 js

<body> 
     <script type="text/javascript"> 
      var width = 800; 
      var height = 500;    
      var dataset = [];      

      dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
          11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 


      var xScale = d3.scaleBand() 
          .domain(d3.range(dataset.length)) 
          .rangeRound([0, width], 0.5); 

      var yScale = d3.scaleLinear() 
          .domain([0, d3.max(dataset)]) 
          .range([0, height]); 

      var svg = d3.select("body") 
         .append("svg") 
         .attr("width",width) 
         .attr("height",height);    

      svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect")    
       .attr("x", function(d, i){return xScale(i);}) 
       .attr("y", function(d){return height- yScale(d);}) 
       .attr("width", xScale.bandwidth()) 
       .attr("height", function(d){return yScale(d);}) 
       .attr("fill", function(d){return "rgb(0,0,"+d*10+")";}); 

      svg.selectAll("text") 
       .data(dataset) 
       .enter() 
       .append("text")  
       .text(function(d){return d;})  
       .attr("text-anchor", "middle")    
       .attr("x", function(d, i){return xScale(i) + xScale.bandwidth()/2;}) 
       .attr("y", function(d){return height - yScale(d) + 14;})     
       .attr("fill", "white");    

     </script> 
    </body>

に私のコードは、この

 .rangeRound([0, width], 0.5);

結果

ですバーの間にいくつかの隙間があるはずです。しかし、私はなぜ分からないのです - ギャップはありません！私は何が間違っていますか？私はD3のV4の新しいパターンがあることと考えている

出典

2016-10-06 kurumkan

var xScale = d3.scaleBand() 
     .domain(d3.range(dataset.length)) 
     .rangeRound([0, width]) 
     .paddingInner(0.05);

出典

2016-10-06 10:26:21 dmoo

何パディングとpaddingInnerの違いは？これを埋めているので、これもうまくいきます。 – kurumkan

このリンクを見てください - 最初の要素と最後の要素に余分な行を埋め込むことを避けるため、内側を埋め込むことは避けてください - https://www.npmjs.com/package/d3-scale ＃band-scales - パディングは内側と外側の両方にスペースを追加します。 – dmoo

バーの間に隙間がない理由D3 js

答えて

関連する問題