How to set xaxis lables in d3js?

Question

I'm a beginner in d3js. I want to create a bar chart with the custom labels for xaxis. I tried the following code but it does not work and I can't see the xaxis ticks correctly. Please check it and let me know my problem in code.

         dataset = [10, 15, 34, 16, 47, 98, 53]
         var svg = d3.select(".activecounts")
             .append("svg")
             .attr("width", width)
             .attr("height", height);

         var padding = {
             left: 30,
             right: 30,
             top: 20,
             bottom: 20
         };
         var xScale = d3.scaleBand()
             .domain(["a", "b", "c", "d", "e", "f", "g"])
             .range([0, width - padding.left - padding.right]);

         var yScale = d3.scaleLinear()
             .domain([0, d3.max(dataset)])
             .range([height - padding.top - padding.bottom, 10]);

         var xAxis = d3.axisBottom()
             .scale(xScale)

         var yAxis = d3.axisLeft()
             .scale(yScale)

         var rectPadding = 4;

         var rects = svg.selectAll(".MyRect")
             .data(dataset)
             .enter()
             .append("rect")
             .attr("class", "MyRect")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(i) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("width", xScale.bandwidth() - rectPadding)
             .attr("height", function(d) {
                 return height - padding.top - padding.bottom - yScale(d);
             });
         var texts = svg.selectAll(".MyText")
             .data(dataset)
             .enter()
             .append("text")
             .attr("class", "MyText")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(i) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("dx", function() {
                 return (xScale.bandwidth() - rectPadding) / 2;
             })
             .attr("dy", function(d) {
                 return -10;
             })
             .text(function(d) {
                 return d;
             });

         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
             .call(xAxis);


         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .call(yAxis);

Please check it and let me know my fault. I updated the above code to show how I made my bar chart. Please check it and let me know if anything needed to be clarified more.

Answer 1

Without a working code snippet it is hard to find the issue. It could be that you only defined your xScale, but did not call it. Here is a working example, hope that helps:

var svg = d3
     .select("body")
     .append("svg")
     .attr("width", 200)
     .attr("height", 100)

var xScale = d3.scaleBand()
     .domain(["a", "b", "c", "d", "e", "f", "g"])
     .range([0, 200]);

svg
     .append("g")
     .attr("transform", "translate(0,80)")
     .call(d3.axisBottom(xScale));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

EDIT: Based on your new code, here's a working example. The input for the xScale function should be something in the domain, thus "a" or "b", etc. Therefore, using the the index i, you can refer to the corresponding domain if you store in it in an array.

var height = 200;
var width = 300;

dataset = [10, 15, 34, 16, 47, 98, 53]
         var svg = d3.select("body")
             .append("svg")
             .attr("width", width)
             .attr("height", height);

         var padding = {
             left: 30,
             right: 30,
             top: 20,
             bottom: 20
         };
        var domain = ["a", "b", "c", "d", "e", "f", "g"];
         var xScale = d3.scaleBand()
             .domain(domain)
             .range([0, width - padding.left - padding.right]);

         var yScale = d3.scaleLinear()
             .domain([0, d3.max(dataset)])
             .range([height - padding.top - padding.bottom, 10]);

         var xAxis = d3.axisBottom()
             .scale(xScale)

         var yAxis = d3.axisLeft()
             .scale(yScale)

         var rectPadding = 4;

         var rects = svg.selectAll(".MyRect")
             .data(dataset)
             .enter()
             .append("rect")
             .attr("class", "MyRect")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(domain[i]) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("width", xScale.bandwidth() - rectPadding)
             .attr("height", function(d) {
                 return height - padding.top - padding.bottom - yScale(d);
             });
         var texts = svg.selectAll(".MyText")
             .data(dataset)
             .enter()
             .append("text")
             .attr("class", "MyText")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .attr("x", function(d, i) {
                 return xScale(domain[i]) + rectPadding / 2;
             })
             .attr("y", function(d) {
                 return yScale(d);
             })
             .attr("dx", function() {
                 return (xScale.bandwidth() - rectPadding) / 2;
             })
             .attr("dy", function(d) {
                 return -10;
             })
             .text(function(d) {
                 return d;
             });

         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
             .call(xAxis);


         svg.append("g")
             .attr("class", "axis")
             .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
             .call(yAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>