d3.js v4の連続スケール（例えばscaleLinear）にパディングを設定するには？

Question

私はあなたが順序尺度した場合とほぼ同じ方法で、私のヒストグラムのバーのパディングを設定しようとしている：

x = d3.scaleLinear() 
    .domain([fist, last]) 
    .rangeRound([bottom, top]) 
    .padding(someFractionBetweenZeroAndOne) 

ハズレを。それは動作しません。だから私はAPI documentationに向いています。連続スケールには.paddingメソッドがありません！

まあ、私はをで手動でバー幅を計算できますが、実際には連続したスケールに統合されたpadding解決策はありませんか？

Answer 1

なしリニアスケールのパディング感があります！

しかし、グループには（Bostockのようにthis exampleにあるような）いくつかのスペースを追加して、隣接するものにいくらかのスペースを持つようにグループ内の矩形の位置を設定するなど、いくつかの方法があります。

もう1つの方法は、矩形の位置と大きさを変更することです（「手動でバー幅を計算する」）。たとえば、このデモでは、各バーの幅を各ビンの幅の90％ずつ変更しています。

var data = [{x:0, y:10}, 
 
      {x:2, y:40}, 
 
      {x:4, y:70}, 
 
      {x:6, y:30}, 
 
      {x:8, y:20}]; 
 

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

 
var xScale = d3.scaleLinear() 
 
    .domain([0, 10]) 
 
    .range([0, 300]); 
 

 
var barWidth = xScale.domain()[1]/data.length; 
 

 
var yScale = d3.scaleLinear() 
 
    .domain([0, 80]) 
 
    .range([200, 0]); 
 

 
var bars = svg.selectAll(".bars") 
 
    .data(data) 
 
    .enter() 
 
    .append("rect"); 
 

 
bars.attr("x", function(d){ return xScale(d.x)}) 
 
    .attr("y", function(d){ return yScale(d.y)}) 
 
    .attr("width", function(d,i){ return xScale(barWidth) * 0.9}) 
 
    .attr("height", function(d){ return 200 - yScale(d.y)});

rect { 
 
    fill: teal; 
 
    }

<script src="https://d3js.org/d3.v4.min.js"></script>