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

答案是我的钥匙并不独特。

我每个月都会添加＆＃39; 15和＆＃39;所有的酒吧都出现了！

RangeBand不包括所有条形

1 个答案: