I am facing issue in order to have integer values in x-axis(graph shown in above link). x-axis should be divided as 1,2,3 but it is getting divided as 0.0, 0.2, 0.4, 0.6,...,2.8 ,3.0 . I have the following code:
private initSvg() {
d3.select("#svg1")
.attr("width", document.getElementById("svg1").parentElement.offsetWidth - 300 - this.margin.left - this.margin.right)
.attr("height", (document.getElementById("svg1").parentElement.offsetWidth / 3))
this.svg = d3.select('#svg1');
this.width = document.getElementById("svg1").parentElement.offsetWidth - 300 - this.margin.left - this.margin.right;
// this.height = +this.svg.attr("height") - this.margin.top - this.margin.bottom;
this.height = (document.getElementById("svg1").parentElement.offsetHeight - 100)
// console.log(this.width, this.height)
this.g = this.svg.append("g")
.attr("transform", "translate(" + (this.margin.left + 100) + "," + this.margin.top + ")");
}
private initAxis() {
this.y = d3Scale.scaleBand().rangeRound([0, this.height]).padding(0.1);
this.x = d3Scale.scaleLinear().rangeRound([this.width, 0]);
this.y.domain(this.STATISTICS.map((d) => d.qua));
this.x.domain([d3Array.max(this.STATISTICS, (d) => d.value + 2), 0]);
}
private drawAxis() {
this.g.append("g")
.attr("class", "x")
.attr("transform", "translate(0," + this.height + ")")
.call(d3Axis.axisBottom(this.x).tickSize(-this.height))
.selectAll("text")
.attr("dy", "1em")
.selectAll("path")
.attr("class", "opac")
.style("stroke-opacity", "0")
this.g.append("g")
.attr("class", "y")
// .attr("transform", "translate(0," + (- ((document.getElementById("svg1").parentElement.offsetWidth / 3) * 10) / 100) + ")")
.call(d3Axis.axisLeft(this.y).tickSize(-this.width))
.append("text")
.attr("class", "axis-title")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
}
private drawBars() {
var i = 0;
var trans = this.g.selectAll(".bar")
.data(this.STATISTICS)
.enter().append("rect")
.style("fill", (d: any) => { i++; return this.colorrange[i]; })
.attr("y", (d) => this.y(d.qua))
.attr("height", (this.y.bandwidth()))
// .attr("height", 60)
trans.transition()
.duration(2000)
.delay(function (d, i) {
return i * 50;
})
.attr("x", (d) => 0 /*this.x(d.AverageValue)*/)
.attr("width", (d) => /* this.height -*/ this.x((d.value == "" ? 0 : d.value)))
}
private drawLabel() {
this.g.selectAll('.label')
.data(this.STATISTICS)
.enter().append('text')
.attr('class', (d) => this.x(d.value) < 50 ? 'label bar-value-2' : 'label bar-value')
.style('font-size', (d) => (this.y.bandwidth() < 30 ? this.y.bandwidth() * 0.7 : 14) + 'px')
// .attr('x', (d) => this.x(d.AverageValue) < 40 ? 40 : this.x(d.AverageValue) - 7)
.attr('x', 100)
.attr('y', (d) => this.y(d.qua) + this.y.bandwidth() * 0.5 + 6);
}
And I am calling all this in a different method to get result:
setTimeout(() => {
this.initSvg()
this.initAxis()
this.drawAxis()
this.drawBars()
this.drawLabel()
}, 500);
Note:
STATISTICS = [
{qua: "Yes", value: 1}
{qua: "No", value: 1},
];
Tried to change something in x-domain but it didn't worked. Honestly, I am new to d3 and that's why don't know where to make changes.
Need further assistance. Thanks.