在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即使我一直紧跟这个示例，过滤器也被添加到元素的前面。
您快到了，只需要正确设置过滤器层次即可。过滤器元素必须是同级。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句