How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart

user_3140158 0
Viewed 242

I have drawan a chart using d3. Then Put axises labels inside Now wanted is labels not seems to cross tick line. But its Label background should be white. for that I found adding rectangle in svg only works. How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart.

enter image description here

Here is existing code

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="With 0 removal">
  <title>
    D3.js | D3.axis.tickSizeInner() Function
  </title>

  <script type="text/javascript" src="https://d3js.org/d3.v5.min.js">
  </script>

  <style>
    svg text {
      fill: green;
      font: 15px sans-serif;
      text-anchor: center;
    }
  </style>
</head>

<body>
  <script>
    var width = 400,
      height = 400;
    const margin = 5;
    const padding = 5;
    const adj = 30;
    var svg = d3.select("body")
      .append("svg")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "-" +
        adj + " -" +
        adj + " " +
        (width + adj * 3) + " " +
        (height + adj * 3))
      .style("padding", padding)
      .style("margin", margin)
      .attr("width", width)
      .attr("height", height);

    var xscale = d3.scaleLinear()
      .domain([0, 10])
      .range([0, width]);
    var yscale = d3.scaleLinear()
      .domain([0, 1])
      .range([height, 0]);

    var x_axis = d3.axisBottom(xscale)
      .tickSizeInner(-(height))
      .tickSizeOuter(0);


    svg.append("g")
      .classed('axis axis-x', true)
      .attr("transform", "translate(0, " + height + ")")
      .call(x_axis)
      .selectAll(".tick text")
      .attr("transform", "translate(0,-20)");

    svg.select('.axis-x')
      .selectAll('.tick')
      .each(function(d) {
        console.log(d)
        if (Number(d) === 0) {
          d3.select(this).remove();
        }
      })





    var y_axis = d3.axisLeft(yscale)
      .tickSize(-width);

    svg.append("g")
      .classed('axis axis-y', true)
      .call(y_axis)
      .selectAll(".tick text")
      .attr("transform", "translate(30,0)");

    svg.select('.axis-y')
      .selectAll('.tick')
      .each(function(d) {
        console.log(d)
        if (Number(d) === 0) {
          d3.select(this).remove();
        }
      })
  </script>
</body>

</html>

Links for JSBIN https://jsbin.com/locosun/1/edit?html,output

d3.js data-visualization charts svg javascript
1 Answers

The following code will add white backgrounds to the tick labels:

    svg.select('.axis-y')
      .selectAll('g.tick')
      .insert('rect', 'text')
      .attr('x', 3)
      .attr('y', -10)
      .attr('width', 30)
      .attr('height', 20)
      .style('fill', 'white')
    
    svg.select('.axis-x')
      .selectAll('g.tick')
      .insert('rect', 'text')
      .attr('x', -15)
      .attr('y', -20)
      .attr('width', 30)
      .attr('height', 18)
      .style('fill', 'white')



<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="With 0 removal">
  <title>
    D3.js | D3.axis.tickSizeInner() Function
  </title>

  <script type="text/javascript" src="https://d3js.org/d3.v5.min.js">
  </script>

  <style>
    svg text {
      fill: green;
      font: 15px sans-serif;
      text-anchor: center;
    }
  </style>
</head>

<body>
  <script>
    var width = 400,
      height = 400;
    const margin = 5;
    const padding = 5;
    const adj = 30;
    var svg = d3.select("body")
      .append("svg")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "-" +
        adj + " -" +
        adj + " " +
        (width + adj * 3) + " " +
        (height + adj * 3))
      .style("padding", padding)
      .style("margin", margin)
      .attr("width", width)
      .attr("height", height);

    var xscale = d3.scaleLinear()
      .domain([0, 10])
      .range([0, width]);
    var yscale = d3.scaleLinear()
      .domain([0, 1])
      .range([height, 0]);

    var x_axis = d3.axisBottom(xscale)
      .tickSizeInner(-(height))
      .tickSizeOuter(0);


    svg.append("g")
      .classed('axis axis-x', true)
      .attr("transform", "translate(0, " + height + ")")
      .call(x_axis)
      .selectAll(".tick text")
      .attr("transform", "translate(0,-20)");

    svg.select('.axis-x')
      .selectAll('.tick')
      .each(function(d) {
        console.log(d)
        if (Number(d) === 0) {
          d3.select(this).remove();
        }
      })





    var y_axis = d3.axisLeft(yscale)
      .tickSize(-width);

    svg.append("g")
      .classed('axis axis-y', true)
      .call(y_axis)
      .selectAll(".tick text")
      .attr("transform", "translate(30,0)");

    svg.select('.axis-y')
      .selectAll('.tick')
      .each(function(d) {
        console.log(d)
        if (Number(d) === 0) {
          d3.select(this).remove();
        }
      })

svg.select('.axis-y')
  .selectAll('g.tick')
  .insert('rect', 'text')
  .attr('x', 3)
  .attr('y', -10)
  .attr('width', 30)
  .attr('height', 20)
  .style('fill', 'white')

svg.select('.axis-x')
  .selectAll('g.tick')
  .insert('rect', 'text')
  .attr('x', -15)
  .attr('y', -20)
  .attr('width', 30)
  .attr('height', 18)
  .style('fill', 'white')

  </script>
</body>

</html>

user_107564890
Related