D3刻度与背景

Question

D3轴如何tick具有背景颜色？

这样做的一种野蛮方式是rect在每个元素中附加一个元素g.tick并且有一个元素fill,但它很难实现,因为它rect必须与内部的文本大小相同tick.

这是迈克博斯托克(以及另一个图表)的基本刻度示例

---

我拍了一个截图并标记(红色边框),我希望刻度线有背景颜色:

---

有没有人知道任何有理由在Ticks上有背景颜色？谢谢

Answer 1

另一个选择是制作这样的过滤器:

  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");

并勾选添加过滤器,如下所示:

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

在这里工作代码