RangeBand不包括所有酒吧

Question

我的rangeBand实现包括一部分，但不是所有酒吧进入。

我的数据集有19个职位，其中12个显示在图表中。

已尝试更改rangeBand上的间隔数据长度，以更大的宽度和各种其他选项。

为了适应数据数组中的所有条/项，间隔应该是多少？

const data = [ 
{key: "April", value: 5283}, 
{key: "May", value: 5361}, 
{key: "June", value: 5761}, 
{key: "July", value: 5349}, 
{key: "August", value: 4729}, 
{key: "September", value: 4657}, 
{key: "October", value: 4183}, 
{key: "November", value: 3428}, 
{key: "December", value: 4281}, 
{key: "January", value: 3284}, 
{key: "February", value: 3576}, 
{key: "March", value: 5417}, 
{key: "April", value: 5517}, 
{key: "May", value: 5916}, 
{key: "June", value: 6104}, 
{key: "July", value: 5342}, 
{key: "August", value: 5573}, 
{key: "September", value: 5211}, 
{key: "October", value: 3248}, 
]; 

var w = 1000; 
var h = 450; 

var margin = { 
top: 30, 
bottom: 50, 
left: 10, 
right: 60 
}; 

let width = w - margin.left - margin.right; 
let height = h - margin.top - margin.bottom; 
let barOuterPad = .1; 
let barPad = .025; 

var x = d3.scale.ordinal() 
    .domain(data.map(function(entry){ 
     return entry.key; 
    })) 
    .rangeBands([0, width],barPad, barOuterPad); 
var y = d3.scale.linear() 
    .domain([0, d3.max(data, function(d){ 
     return d.value; 
    })]) 
    .range([height, 0]); 
var ordinalColorScale = d3.scale.category20(); 
var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 
var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 
var yGridlines = d3.svg.axis() 
      .scale(y) 
      .tickSize(-width,0,0) 
      .tickFormat("") 
      .orient("left"); 
var svg = d3.select("body").append("svg") 
     .attr("id", "chart") 
     .attr("width", w) 
     .attr("height", h); 
var chart = svg.append("g") 
     .classed("display", true) 
     .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")"); 
function plot(params){ 
this.append("g") 
    .call(yGridlines) 
    .classed("gridline", true) 
    .attr("transform", "translate(0,0)"); 
this.selectAll(".bar") 
    .data(params.data) 
    .enter() 
     .append("rect") 
     .classed("bar", true) 
     .attr("x", function(d){ 
      return x(d.key); 
     }) 
     .attr("y", function(d){ 
      return y(d.value); 
     }) 
     .attr("height", function(d){ 
      return height - y(d.value); 
     }) 
     .attr("width", function(){ 
      return x.rangeBand(); 
     }) 
     .style("fill", function(i){ 
      return ordinalColorScale(i); 
     }); 

this.selectAll(".bar-label") 
    .data(params.data) 
    .enter() 
     .append("text") 
     .classed("bar-label", true) 
     .attr("x", function(d,i){ 
      return x(d.key) + (x.rangeBand()/2) 
     }) 
     .attr("dx", 0) 
     .attr("y", function(d){ 
      return y(d.value); 
     }) 
     .attr("dy", -6) 
     .text(function(d){ 
      return d.value; 
     }); 
    this.append("g") 
    .classed("x axis", true) 
    .attr("transform", "translate(" + 0 + "," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", -8) 
    .attr("dy", 8) 
    .attr("transform", "translate(0,0) rotate(-45)"); 

this.append("g") 
    .classed("y axis", true) 
    .attr("transform", "translate(0,0)") 
    .call(yAxis); 

this.select(".y.axis") 
    .append("text") 
    .attr("x", 0) 
    .attr("y", 0) 
    .style("text-anchor", "middle") 
    .attr("transform", "translate(-50," + height/2 + ") rotate(-90)") 
    .text("Units Sold"); 

this.select(".x.axis") 
    .append("text") 
    .attr("x", 0) 
    .attr("y", 0) 
    .text("text-anchor", "middle") 
    .attr("transform", "translate(" + width/2 + ", 80)") 
    .text("Date"); 
} 
plot.call(chart, {data: data}); 
} 

Answer 1

答案是我的钥匙不是唯一的。

我给每个月加了'15和'16，所有酒吧都出现了！