Extending the axis bar height in d3 js charts - css

Question

I have created a bar chart using d3. Now I want extend the height of the x axis but couldn't find out how to do so. The height attr doesnt work and stroke attr just updates the tick text. Is there any way to extend height without changing the text labels.
Here is the link of what I am trying to do : Adding background color in d3 js bar chart using data values

Answer 1

As I suggested in your previous question, just add a rectangle before appending the axis:
var orangeBox = svg.append("rect")
.attr("x", 0)
.attr("y", height)
.attr("width", width)
.attr("height", margin.bottom)
.attr("fill", "orange")
.attr("opacity", 0.2);
Here is your code with that change:
var mydata = {
"min": 68.9813,
"avg": 177.5037,
"max": 672.6713,
"values": [{
"bin": -50.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 0.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 50.0,
"percent": 6.7028,
"samples": 309
}, {
"bin": 100.0,
"percent": 32.2897,
"samples": 2407
}, {
"bin": 150.0,
"percent": 32.4565,
"samples": 3207
}, {
"bin": 200.0,
"percent": 17.1745,
"samples": 2064
}, {
"bin": 250.0,
"percent": 6.1833,
"samples": 940
}, {
"bin": 300.0,
"percent": 2.4971,
"samples": 444
}, {
"bin": 350.0,
"percent": 1.2438,
"samples": 279
}, {
"bin": 400.0,
"percent": 0.9262,
"samples": 182
}, {
"bin": 450.0,
"percent": 0.2781,
"samples": 71
}, {
"bin": 500.0,
"percent": 0.0962,
"samples": 24
}, {
"bin": 550.0,
"percent": 0.074,
"samples": 25
}, {
"bin": 600.0,
"percent": 0.0535,
"samples": 24
}, {
"bin": 650.0,
"percent": 0.0243,
"samples": 6
}, {
"bin": 700.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 750.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 800.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 850.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 900.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 950.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 1000.0,
"percent": 0.0,
"samples": 0
}],
"index": 7,
"time_h": 13.8529,
"stddev": 67.8836,
"samples": 9982
};
//set the dimensions and margins of the graph
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(2)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(10)
}
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.style('fill', 'black');;
// get the data
// d3.csv("sales.csv", function(error, data) {
// if (error) throw error;
// // format the data
// data.forEach(function(d) {
// d.sales = +d.sales;
// });
// Scale the range of the data in the domains
x.domain(mydata.values.map(function(d) {
return d.bin;
}));
y.domain([0, d3.max(mydata.values, function(d) {
return d.percent;
})]);
var redBox = svg.append("rect")
.attr("x", x(200) + x.bandwidth() / 2)
.attr("y", 0)
.attr("width", x(x.domain()[x.domain().length - 1]) - x(200) + x.bandwidth() / 2)
.attr("height", height)
.attr("fill", "red")
.attr("opacity", 0.2);
var orangeBox = svg.append("rect")
.attr("x", 0)
.attr("y", height)
.attr("width", width)
.attr("height", margin.bottom)
.attr("fill", "orange")
.attr("opacity", 0.2);
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(mydata.values)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.bin) + (x.bandwidth() - 4) / 2;
})
.attr("width", Math.min(x.bandwidth(), 5))
.attr("y", function(d) {
return y(d.percent);
})
.attr("height", function(d) {
return height - y(d.percent);
});
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
);
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
);
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
<script src="https://d3js.org/d3.v4.min.js"></script>