D3：將濾鏡添加爲SVG元素的背景

Question

在D3中，我想將背景顏色應用於我的軸標籤。它可以通過rect完成，但使用SVG過濾器看起來像更好的選擇，因爲它們適應標籤的大小。我已經使用

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

來this far (fiddle)但過濾器在text元素的前面加，即使我緊隨其後this example。

Answer 1

你幾乎在那裏，你只需要獲得正確的過濾器層次結構。過濾元素需要是兄弟姐妹。

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") 
 
\t \t .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") 
 
\t \t .style("filter", "url(#textBackground)"); 
 
    
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>