d3.js - D3 tick with background

Question

How can a D3 axis tick have a background color?

A brute way of doing so it to append a rect element inside each g.tick and have a fill on it, but it's quite difficult to achieve, since the rect has to be the same size as the text inside the tick..

Here's a basic ticks example by Mike Bostock (and another with graph)

---

I took a screenshot and marked (red border) where I want the ticks to have background color:

---

Does anyone know of any sane way of having background color on Ticks? Thanks

Answer 1

Another option would be to make a filter like this:

  var filter = svg.append("defs").append("filter")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", "1")
    .attr("height", "1")
    .attr("id", "background")//id of the filter
  filter.append("feFlood")
    .attr("flood-color", "red");
  filter.append("feComposite")
    .attr("in", "SourceGraphic");

and to ticks add the filter like this:

 g.selectAll(".tick text").attr("filter","url(#background)");

working code here