CODEWITHSUNDEEP
javascriptd3.jssvg
smcs
smcs

Reputation: 2004

D3: add filter as background to SVG element

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.

Upvotes: 2

Views: 1973

Answers (1)

Robert Longson
Robert Longson

Reputation: 124299

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>

Upvotes: 2

Related Questions