I need to make the x-axis-label (and y-axis-label as well) of my bar-chart visible. In this case, y-axis-label must be: "Unemployment Rate", and x-axis-label: Regions in Vietnam. Through Chrome's inspection tool, I prove those elements are there, but they're simply hidden. For example, the y-axis-label:
- HTML SVG Text element of y-axis-label was created
- The display shows a selected area for this element
- Color of this element is RED (I made it manually in Chrome), not same color as background.
Screenshot and code are put below. I understand this must be some stupid mistakes but unfortunately I'm not able to figure it out by myself after 1 day. Please help.
Link to JSfidle: https://jsfiddle.net/ngminhtrung/703exxc0/
var data = [{
"area": "Đồng bằng sông Hồng",
"age1": 9.62,
"age2": 1.45,
"age3": 20
},
{
"area": "Trung du và miền núi phía Bắc",
"age1": 2.95,
"age2": 20,
"age3": 20
},
{
"area": "Bắc Trung Bộ và duyên hải miền Trung",
"age1": 8.26,
"age2": 20,
"age3": 20
},
{
"area": "Tây Nguyên",
"age1": 2.47,
"age2": 20,
"age3": 20
},
{
"area": "Đông Nam Bộ",
"age1": 8.02,
"age2": 20,
"age3": 20
},
{
"area": "Đồng bằng sông Cửu Long",
"age1": 8.19,
"age2": 20,
"age3": 20
}
];
var w = data.length * 100;
var h = 600;
var barHeight = 30;
var margin = {
top: 100,
bottom: 200,
left: 150,
right: 100
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var formatAsPercentage = d3.format(".1%");
var x = d3.scaleBand()
.domain(data.map(function(entry) {
return entry.area;
}))
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.age1;
})])
.range([height, 0]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var ordinalColorScale = d3.scaleOrdinal(d3.schemeCategory10);
var yGridlines = d3.axisLeft(y)
.tickSize(-width, 0, 0)
.tickFormat("");
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 + ")");
chart.append("g")
.call(yGridlines)
.classed("gridline", true)
.attr("transform", "translate(0,0)");
chart.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.classed("bar", true)
.attr("x", function(d, i) {
return x(d.area) + 1;
})
.attr("y", function(d, i) {
return y(d.age1);
})
.attr("height", function(d) {
return height - y(d.age1);
})
.attr("width", function(d) {
return x.bandwidth() - 1;
})
.style("fill", function(d, i) {
return ordinalColorScale(i);
});
chart.selectAll(".bar-label")
.data(data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x", function(d, i) {
return x(d.area) + x.bandwidth();
})
.attr("dx", -30)
.attr("y", function(d, i) {
return y(d.age1);
})
.attr("dy", 18)
.style("font-size", "12px")
.text(function(d) {
return d.age1;
});
chart.append("g")
.classed("x axis", true)
.attr("transform", "translate(" + 0 + "," + (height + 2) + ")")
.call(xAxis)
.selectAll("text")
.classed("x-axis-label", true)
.style("text-anchor", "start")
.attr("dx", 8)
.attr("dy", 10)
.attr("transform", "rotate(45)")
.style("font-size", "12px")
chart.append("g")
.classed("y axis", true)
.attr("transform", "translate(-3,0)")
.call(yAxis)
//This is the y label
chart.select(".y.axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left / 2)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Unemployment Rate");
//This is the x label
chart.select(".x.axis")
.append("text")
.attr("x", 0)
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + width / 2 + ",80)")
.text("Regions in Vietnam");body,
html {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 0.95em;
text-align: center;
}
#chart {
background-color: #F5F2EB;
border: 1px solid #CCC;
}
.bar {
fill: purple;
shape-rendering: crispEdges;
}
.bar-label {
fill: #000;
text-anchor: middle;
font-size: 18px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.gridline path,
.gridline line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
</body>