In D3 I'd like to apply a background colour to my axis labels. It could be done with rect but using SVG filters looks like a nicer option since they adapt to the size of the labels. I've come this far (fiddle) using
var filterDef = svg.append("defs");
var filter = filterDef.append("filter")
.attr("id", "textBackground")
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1)
.append("feFlood")
.attr("flood-color", "green")
.attr("result","txtBackground")
var filterMerge = filter.append("feMerge");
filterMerge.append("feMergeNode")
.attr("in", "txtBackground");
filterMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
d3.selectAll(".xAxis>.tick>text")
.style("filter", "url(#textBackground)");
but the filters are added in front of the text elements, even though I've closely followed this example.
You're nearly there, you just need to get the filter hierarchy right. The filter elements need to be siblings.
var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var padding = 50;
svg.attr("width", w)
.attr("height", h);
var xScale = d3.time.scale()
.domain([0, 1000])
.range([padding, w-padding]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(5);
svg.append("g")
.attr("class","xAxis")
.call(xAxis);
var filterDef = svg.append("defs");
var filter = filterDef.append("filter")
.attr("id", "textBackground")
.attr("x", 0)
.attr("y", 0)
.attr("width", 1)
.attr("height", 1);
filter
.append("feFlood")
.attr("flood-color", "green")
.attr("result","txtBackground")
var filterMerge = filter.append("feMerge");
filterMerge.append("feMergeNode")
.attr("in", "txtBackground");
filterMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
d3.selectAll(".xAxis>.tick>text")
.style("filter", "url(#textBackground)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments