Placing text at center of rectangle

Question

In the following code the text is not placed at the center of the rectangle, I am using

.attr("dx", x.bandwidth()/2)
 .attr("dy", y.bandwidth()/2)

Rather than trial and error, is there a way to place the text center in the rectangle?

Currently it looks like this (towards bottom and towards right):

Following is my code:

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
    rect {
        stroke: #9A8B7A;
        stroke-width: 1px;
        fill: #CF7D1C;
        opacity:
    }
</style>
<body>
<svg width="500" height="500"></svg>

</body>
<script>
    var dataset = [[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]];



    var local = d3.local();

    var svg = d3.select("svg"),
            margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom;

    var x = d3.scaleBand().rangeRound([0, width]);
    var y = d3.scaleBand().rangeRound([0, height]);

    y.domain(dataset.map(function(d,i) { return i; }));

    var maxChildLength= d3.max(dataset, function(d) { return d.length; });
    var xArr=Array.apply(null, {length: maxChildLength}).map(Function.call, Number);
    x.domain(xArr);

    var maxNum = d3.max(dataset, function(array) {
        return d3.max(array);
    });

    var color=d3.scaleLinear().domain([0,maxNum]).range([0,1]);

    svg.append("g")
            .selectAll("g")
            .data(dataset)//use top-level data to join g
            .enter()
            .append("g")
            .selectAll("rect")
            .data(function(d, i) {//for each <g>, use the second-level data (return d) to join rect
                local.set(this, i);//this is the <g> parent
                return d;
            })
            .enter()
            .append("rect")

            .attr("x", function(d, i, j) {
               // return (i * 20) + 40;
                return x(i);
            })
            .attr("y", function(d) {
            //    return (local.get(this) * 20) + 40;
                return y(local.get(this));
            })
            //.attr("width",20)
            .attr("width", x.bandwidth())
            .attr("height", y.bandwidth())
            .attr("fill-opacity",function(d){console.log(color(+d));return color(+d);})



    svg.append("g")
            .selectAll("g")
            .data(dataset)
            .enter()
            .append("g")
            .selectAll("text")
            .data(function(d, i) {

                local.set(this, i)
                return d;
            })
            .enter()
            .append("text")
            .text(function(d, i, j) {
                return d;
            })
            .attr("x", function(d, i, j) {
                // return (i * 20) + 40;
                return x(i);
            })
            .attr("y", function(d) {
                return y(local.get(this));
                //return (local.get(this) * 20) + 40;
            })
            .attr("dx", x.bandwidth()/2)
            .attr("dy", y.bandwidth()/2)
            .attr("dominant-baseline", "text-before-edge")
            .attr("font-family", "sans-serif")
            .attr("font-size", "20px")







</script>

score 6 · Accepted Answer · answered Oct 08 '17 at 13:38

Use text-align: middle and dominant-baseline: central:

.attr("text-anchor", "middle")
.attr("dominant-baseline", "central")

Here is your code with those changes:

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
  rect {
    stroke: #9A8B7A;
    stroke-width: 1px;
    fill: #CF7D1C;
    opacity:
  }

</style>

<body>
  <svg width="500" height="500"></svg>

</body>
<script>
  var dataset = [
    [1, 3, 3, 5, 6, 7],
    [3, 5, 8, 3, 2, 6],
    [9, 0, 6, 3, 6, 3],
    [3, 4, 4, 5, 6, 8],
    [3, 4, 5, 2, 1, 8]
  ];



  var local = d3.local();

  var svg = d3.select("svg"),
    margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

  var x = d3.scaleBand().rangeRound([0, width]);
  var y = d3.scaleBand().rangeRound([0, height]);

  y.domain(dataset.map(function(d, i) {
    return i;
  }));

  var maxChildLength = d3.max(dataset, function(d) {
    return d.length;
  });
  var xArr = Array.apply(null, {
    length: maxChildLength
  }).map(Function.call, Number);
  x.domain(xArr);

  var maxNum = d3.max(dataset, function(array) {
    return d3.max(array);
  });

  var color = d3.scaleLinear().domain([0, maxNum]).range([0, 1]);

  svg.append("g")
    .selectAll("g")
    .data(dataset) //use top-level data to join g
    .enter()
    .append("g")
    .selectAll("rect")
    .data(function(d, i) { //for each <g>, use the second-level data (return d) to join rect
      local.set(this, i); //this is the <g> parent
      return d;
    })
    .enter()
    .append("rect")

  .attr("x", function(d, i, j) {
      // return (i * 20) + 40;
      return x(i);
    })
    .attr("y", function(d) {
      //    return (local.get(this) * 20) + 40;
      return y(local.get(this));
    })
    //.attr("width",20)
    .attr("width", x.bandwidth())
    .attr("height", y.bandwidth())
    .attr("fill-opacity", function(d) {
      return color(+d);
    })



  svg.append("g")
    .selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .selectAll("text")
    .data(function(d, i) {

      local.set(this, i)
      return d;
    })
    .enter()
    .append("text")
    .text(function(d, i, j) {
      return d;
    })
    .attr("x", function(d, i, j) {
      // return (i * 20) + 40;
      return x(i);
    })
    .attr("y", function(d) {
      return y(local.get(this));
      //return (local.get(this) * 20) + 40;
    })
    .attr("dx", x.bandwidth() / 2)
    .attr("dy", y.bandwidth() / 2)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "central")
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")

</script>

Thanks again, I have followup question in reading the 2d array from external file: https://stackoverflow.com/questions/46632435/how-to-store-2d-array-in-external-file-for-d3-access thanks for looking into it! — william007, Oct 08 '17 at 14:55

Placing text at center of rectangle

1 Answers1

Linked