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

但过滤器会添加到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")
		.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>

D3：添加过滤器作为SVG元素的背景

1 个答案: