The SVG fill-opacity attribute controls how transparent an element’s fill paint appears. Use a value from 0 to 1, or a percentage: 0 or 0% hides the fill, while 1 or 100% makes it fully opaque. It affects the fill separately from stroke-opacity, and can also be styled from CSS. section 1.2.2
In D3, set the attribute on a selected SVG element with .attr("fill-opacity", value). This is useful when a visible shape should remain present without covering nearby chart marks or labels. section 7.3.1 section 11.3.2
Hide cramped donut-chart labels
Percentage labels centered in small donut slices can be hard to read. Set each text element’s fill-opacity to 0 when its percentage is below 5%, leaving readable labels on larger arcs without changing the chart’s paths. section 5.1.4
Keep a tooltip visible without blocking the chart
Give a tooltip background rectangle fill-opacity of 0.75. The aubergine rectangle remains readable behind white text while allowing the line chart beneath it to remain partly visible. section 7.3.1
Listing 7.4 Creating the elements of a tooltip (interactions.js)
const createTooltip = () => {
const tooltip = innerChart #1
.append("g")
.attr("class", "tooltip");
tooltip #2
.append("rect")
.attr("width", tooltipWidth)
.attr("height", tooltipHeight)
.attr("rx", 3)
.attr("ry", 3)
.attr("fill", aubergine)
.attr("fill-opacity", 0.75);
tooltip #3
.append("text")
.text("00.0°F")
.attr("x", tooltipWidth/2)
.attr("y", tooltipHeight/2 + 1)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("fill", "white")
.style("font-weight", 900);
}
This tooltip construction shows fill-opacity applied directly to an SVG rect through D3’s attr method. section 7.3.1
Opacity can be data-driven. In a tree chart, leaf-node circles receive fill-opacity 0.3, while other nodes receive 1, making colored leaves lighter than internal nodes. section 11.3.2
