28:null 29:["$","title",null,{"children":"OLD D3.js Cartes population FR (node 3890) | Marc Thevenin | Observable"}] 2e:T1da3,map1 = { const margin = { top: rWidth>600 ? 30 : 5, right: rWidth>600 ? 20 : 5, bottom: rWidth>600 ? 20 : 5, left: rWidth>600 ? 30 : 5 }; const width = size2; const proj_ = projection; proj_.rotate([ mapZoomState.rotateLon != null ? mapZoomState.rotateLon : longitude, mapZoomState.rotateLat != null ? mapZoomState.rotateLat : 0 ]); if (proj === "Globe") proj_.clipAngle(90); else proj_.clipAngle(null); const sphere = {type: "Sphere"}; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, 100000]], sphere); const path0 = d3.geoPath(proj_); const [[x0, y0], [x1, y1]] = path0.bounds(sphere); const height = Math.ceil(y1 - y0) + margin.top + margin.bottom; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]], sphere); const path = d3.geoPath(proj_); const container = html`

`; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", proj === "Natural Earth" ? "100%" : width) .attr("height", "auto") .style("display", "block") .style("max-width", "100%") .style("background", "#fefefe"); svg.append("defs") .append("filter") .attr("id", "map1-shadow") .attr("x", "-30%").attr("y", "-30%").attr("width", "160%").attr("height", "160%") .append("feDropShadow") .attr("dx", .5).attr("dy", .5).attr("stdDeviation", 0.5) .attr("flood-color", "#c1c1c1").attr("flood-opacity", 1); const g = svg.append("g"); const outline = g.append("path") .datum(sphere) .attr("fill", "#ffffff") .attr("d", path) .attr("stroke", "#414141") .attr("stroke-width", .5); const graticulePath = g.append("path") .datum(d3.geoGraticule()()) .attr("fill", "none") .attr("stroke", "#c1c1c1") .attr("stroke-width", 0.1) .attr("d", path); const shadowLayer = g.append("path") .datum(world) .attr("fill", "#616161") .attr("filter", "url(#map1-shadow)") .attr("d", path); const bordersPath = g.append("path") .datum(worldMesh) .attr("fill", "none") .attr("stroke", "#e1e1e1") .attr("stroke-width", 0.3) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); const popMax = d3.max(world.features, d => +d.properties.pop); const rMax = rWidth > 600 ? 26 : 17; const rScale = d3.scaleSqrt([0, popMax], [0, rMax]); const noDataColor = choro.missing_fill || "#fefefe"; const dimmedColor = "#f1f1f1"; const circleColor = (d) => { const value = d.properties.popVar; if (value == null || Number.isNaN(value)) return noDataColor; const idx = legende.classIndex(value); if (idx === -1) return noDataColor; return legende.has(idx) ? choro.colorize(value) : dimmedColor; }; const circleOpacity = (d) => { const value = d.properties.popVar; if (value == null || Number.isNaN(value)) return .95; const idx = legende.classIndex(value); if (idx === -1) return .95; return legende.has(idx) ? .95 : 0; }; const sortedFeatures = world.features .filter(d => d.properties.pop != null) .sort((a, b) => (+b.properties.pop) - (+a.properties.pop)); sortedFeatures.forEach(d => { d.properties._geoCentroid = d3.geoCentroid(d); }); function isVisible(d) { if (proj !== "Globe") return true; const rotate = proj_.rotate(); const center = [-rotate[0], -rotate[1]]; return d3.geoDistance(d.properties._geoCentroid, center) < Math.PI / 2; } function safeCentroid(d) { const c = path.centroid(d); return [Number.isFinite(c[0]) ? c[0] : -9999, Number.isFinite(c[1]) ? c[1] : -9999]; } // --- tooltip, via le contrôleur partagé --- const tooltipSel = d3.select(container) .append("div") .style("max-width", rWidth < 500 ? "190px" : "none") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transition", "opacity .1s") .style("background", "white") .style("border", "1px solid #fff") .style("border-radius", "3px") .style("padding", "4px 8px") .style("font-family", "poppins, sans-serif") .style("overflow", "hidden") .style("color", "#222330") .style("white-space", "nowrap") .style("z-index", 10) .style("box-shadow", "rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px"); const tip = tooltipController(container, tooltipSel); function circleHTML(d) { const statKey = statColumnMap["Taux de croissance"]; const countryRow = df.find(r => r.iso3 === d.properties.iso3); let chartHtml = ""; if (countryRow && statKey) { const items = getIndicatorRows(df, statKey, countryRow); chartHtml = rWidth < 500 ? tooltipListLight(items, choro) : tooltipDotPlot(items, choro); } const popText = d.properties.pop1000 != null ? `

${d.properties.pays} — ${d3.format(",.0f")(+d.properties.pop1000 * 0.000001).replace(/,/g, " ")} millions

` : `

${d.properties.pays}

`; return `${popText}${chartHtml}`; } function circleActiveStyle(node) { d3.select(node).attr("stroke", "black").attr("stroke-width", .4); } function circleResetStyle(node) { d3.select(node).attr("stroke", "#ff564e").attr("stroke-width", .2); } const circles = g.selectAll("circle.circ") .data(sortedFeatures) .join("circle") .attr("class", "circ") .attr("cx", d => safeCentroid(d)[0]) .attr("cy", d => safeCentroid(d)[1]) .attr("r", d => rScale(+d.properties.pop)) .attr("fill", circleColor) .attr("fill-opacity", circleOpacity) .attr("stroke", "#ff564e") .attr("stroke-width", .1) .style("display", d => isVisible(d) ? null : "none"); tip.attach(circles, { getHTML: circleHTML, applyActiveStyle: circleActiveStyle, resetStyle: circleResetStyle }); function redraw() { outline.attr("d", path); graticulePath.attr("d", path); shadowLayer.attr("d", path); bordersPath.attr("d", path); circles .attr("cx", d => safeCentroid(d)[0]) .attr("cy", d => safeCentroid(d)[1]) .style("display", d => isVisible(d) ? null : "none"); } // --- zoom/drag, via le contrôleur partagé --- const initialScale = proj_.scale(); const initialRotate = proj_.rotate(); const zc = zoomController(svg, g, { proj_, projName: proj, versorMode: zoom === "versor", extent: zoom, redraw, shadowLayer, zoomState: mapZoomState, updateZoomState: (patch) => { mutable mapZoomState = { ...mapZoomState, ...patch }; }, initialScale, initialRotate, targetClass: "circ", tooltipHide: tip.hide }); svg.on("click", (event) => tip.unpinIfOutside(event, "circ", circleResetStyle)); const resetButton = html``; resetButton.addEventListener("click", () => zc.resetZoom()); container.appendChild(svg.node()); container.appendChild(resetButton); return container; }2f:Tbb6,tooltipController = function(container, tooltipSelection) { let pinned = false; let pinnedNode = null; function show(node, event, d, getHTML, applyActiveStyle) { applyActiveStyle(node); const closeBtn = pinned ? `` : ""; tooltipSelection .style("opacity", 1) .style("background", "white") .html(`

${getHTML(d)}${closeBtn}

`); } function move(event) { const [mx, my] = d3.pointer(event, container); const containerWidth = container.getBoundingClientRect().width; const tooltipWidth = tooltipSelection.node().getBoundingClientRect().width; const offset = 12; let left; if (mx + offset + tooltipWidth > containerWidth) { left = mx - offset - tooltipWidth; if (left < 0) left = 4; } else left = mx + offset; tooltipSelection.style("left", `${left}px`).style("top", `${my + 12}px`); } function hide() { tooltipSelection.style("opacity", 0); } // getHTML(d) -> string ; applyActiveStyle(node) -> styles au survol/pin ; resetStyle(node) -> styles par défaut function attach(selection, { getHTML, applyActiveStyle, resetStyle }) { selection .style("cursor", "pointer") .on("pointerenter", function (event, d) { if (event.pointerType === "touch" || pinned) return; show(this, event, d, getHTML, applyActiveStyle); }) .on("pointermove", function (event) { if (event.pointerType === "touch" || pinned) return; move(event); }) .on("pointerleave", function (event) { if (event.pointerType === "touch" || pinned) return; resetStyle(this); hide(); }) .on("pointerdown", function (event) { // capture : garantit que pointerup arrive bien sur CE noeud this.setPointerCapture(event.pointerId); }) .on("pointerup", function (event, d) { if (pinned && pinnedNode === this) { pinned = false; pinnedNode = null; resetStyle(this); hide(); return; } if (pinnedNode) resetStyle(pinnedNode); pinned = true; pinnedNode = this; show(this, event, d, getHTML, applyActiveStyle); move(event); }); tooltipSelection.on("click", (event) => { if (event.target.classList.contains("tooltip-close")) { if (pinnedNode) resetStyle(pinnedNode); pinned = false; pinnedNode = null; hide(); } }); } function unpinIfOutside(event, targetClass, resetStyle) { if (pinned && !event.target.classList?.contains(targetClass)) { if (pinnedNode) resetStyle(pinnedNode); pinned = false; pinnedNode = null; hide(); } } return { attach, hide, unpinIfOutside, isPinned: () => pinned }; }30:T103f,zoomController = function(svg, g, opts) { const { proj_, projName, versorMode, redraw, shadowLayer, zoomState, updateZoomState, initialScale, initialRotate, targetClass, tooltipHide } = opts; let zoomBehavior; if (versorMode && projName === "Globe") { svg.style("cursor", "grab"); let dragTotal = 0; const dragBehavior = d3.drag() .filter((event) => { if (event.target.closest && event.target.closest(`.${targetClass}`)) return false; if (event.touches && event.touches.length > 1) return false; return !event.button; }) .on("start", function () { d3.select(this).style("cursor", "grabbing"); dragTotal = 0; shadowLayer.style("display", "none"); }) .on("drag", (event) => { dragTotal += Math.abs(event.dx) + Math.abs(event.dy); if (dragTotal > 4) { tooltipHide(); const k = 75 / proj_.scale(); const r = proj_.rotate(); const lat = Math.max(-90, Math.min(90, r[1] - event.dy * k)); proj_.rotate([r[0] + event.dx * k, lat]); redraw(); } }) .on("end", function () { d3.select(this).style("cursor", "grab"); redraw(); shadowLayer.style("display", null); const r = proj_.rotate(); updateZoomState({ rotateLon: r[0], rotateLat: r[1] }); }); zoomBehavior = d3.zoom() .scaleExtent([0.5, 8]) .filter((event) => { if (event.type === "wheel" || event.type === "dblclick") return true; if (event.type === "touchstart" || event.type === "touchmove") { return event.touches && event.touches.length === 2; } return false; }) .on("start", () => { shadowLayer.style("display", "none"); }) .on("zoom", (event) => { proj_.scale(initialScale * event.transform.k); redraw(); }) .on("end", (event) => { redraw(); shadowLayer.style("display", null); if (event.sourceEvent) { updateZoomState({ k: proj_.scale() / initialScale }); } }); svg.call(dragBehavior).call(zoomBehavior); if (zoomState.k !== 1) { svg.call(zoomBehavior.transform, d3.zoomIdentity.scale(zoomState.k)); } } else if (versorMode && projName !== "Globe") { zoomBehavior = d3.zoom() .scaleExtent([0.5, 8]) .filter((event) => event.type === "wheel" || event.type === "dblclick") .on("zoom", (event) => { proj_.scale(initialScale * event.transform.k); redraw(); }) .on("end", (event) => { redraw(); if (event.sourceEvent) { updateZoomState({ k: proj_.scale() / initialScale }); } }); svg.call(zoomBehavior); if (zoomState.k !== 1) { svg.call(zoomBehavior.transform, d3.zoomIdentity.scale(zoomState.k)); } } else { zoomBehavior = d3.zoom() .scaleExtent(opts.extent || [1, 8]) .filter((event) => { if (event.target.closest && event.target.closest(`.${targetClass}`)) return false; return !event.button; }) .on("zoom", (event) => { g.attr("transform", event.transform); }) .on("end", (event) => { if (event.sourceEvent) { updateZoomState({ k: event.transform.k, x: event.transform.x, y: event.transform.y }); } }); svg.call(zoomBehavior); if (zoomState.k !== 1 || zoomState.x !== 0 || zoomState.y !== 0) { svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(zoomState.x, zoomState.y).scale(zoomState.k)); } } function resetZoom() { updateZoomState({ k: 1, x: 0, y: 0, rotateLon: null, rotateLat: null }); if (versorMode) { svg.transition().duration(600).call(zoomBehavior.transform, d3.zoomIdentity); d3.select({}).transition().duration(600).tween("rotate", () => { const r = d3.interpolate(proj_.rotate(), initialRotate); return (t) => { proj_.rotate(r(t)); redraw(); }; }); } else { svg.transition().duration(600).call(zoomBehavior.transform, d3.zoomIdentity); } } return { zoomBehavior, resetZoom }; }31:T843,popLegend = { const popMax = d3.max(world.features, d => +d.properties.pop); const rMax = 24; const rScale = d3.scaleSqrt([0, popMax], [0, rMax]); const values = [popMax, popMax * 0.35, popMax * 0.08].filter(v => v > 0); const maxR = rScale(values[0]); const paddingTop = 14; const paddingSide = 10; const labelAreaWidth = 46; const width = maxR * 2 + labelAreaWidth + paddingSide * 2; const height = maxR * 2 + paddingTop + 10; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("font-family", "poppins, sans-serif") .style("overflow", "visible"); const cx = paddingSide + maxR; const baseY = height - 6; const g = svg.append("g"); g.append("text") .attr("x", 0) .attr("y", 10) .style("font-size", "clamp(10px, 2.5cqw, 13px)") .style("font-weight", 600) .attr("fill", "#414141") .text("Population (en millions)"); const labelFontSize = 9; const minGap = labelFontSize + 3; const rawY = values.map(v => baseY - rScale(v) * 2); const labelY = rawY.slice(); for (let i = labelY.length - 2; i >= 0; i--) { if (labelY[i] > labelY[i + 1] - minGap) labelY[i] = labelY[i + 1] - minGap; } values.forEach((v, i) => { const r = rScale(v); const cy = baseY - r; g.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", r) .attr("fill", "none") .attr("stroke", "#818181") .attr("stroke-width", .6); const topY = baseY - r * 2; const ly = labelY[i]; g.append("line") .attr("x1", cx) .attr("y1", topY) .attr("x2", cx + maxR + 14) .attr("y2", ly) .attr("stroke", "#c1c1c1") .attr("stroke-width", .5) .attr("stroke-dasharray", "2,2"); g.append("text") .attr("x", cx + maxR + 18) .attr("y", ly + 10) .style("font-size", "clamp(9px, 2.2cqw, 12px)") .attr("fill", "#414141") .text(d3.format(",.0f")(v * 0.001).replace(/,/g, " ")); }); return svg.node(); }32:T41e,boxInput1 = html`

${viewof rWidth} ${viewof longitude} ${cssLegMap}

${viewof legende} ${popLegend}

` 33:T9dc,boxPlot = htl.html `

${map1}

Note : La publication World Population Prospects fournit les estimations de population des Nations Unies pour tous les pays du monde pour chaque année entre 1950 et 2023 et les projections selon différents scénarios (bas, moyen et haut) pour chaque année entre 2024 et 2100. Les chiffres présentés ici correspondent aux projections pour l’année en cours selon le scénario moyen.

Source : World Population Prospects. Nations Unies. 2024.

`34:T5ca,getIndicatorRows = function(dfData, statKey, countryRow) { const continent = countryRow["région1"].trim(); const rawSubregion = countryRow["région2"] ? countryRow["région2"].trim() : null; // pas de sous-région si région2 est "--" OU identique au continent (cas Amérique septentrionale) const hasSubregion = rawSubregion && rawSubregion !== "--" && rawSubregion.toLowerCase() !== continent.toLowerCase(); const subregion = hasSubregion ? rawSubregion : null; const worldRow = dfData.find(r => r["région1"].trim() === "Monde" && r["Pays"].trim() === "Monde"); const continentRow = dfData.find(r => r["région1"].trim() === "Monde" && r["Pays"].trim().toLowerCase() === continent.toLowerCase() ); const subregionRow = subregion ? dfData.find(r => r["région1"].trim().toLowerCase() === continent.toLowerCase() && r["région2"] && r["région2"].trim() === "--" && r["Pays"].trim().toLowerCase() === subregion.toLowerCase() ) : null; return [ worldRow ? { label: "Monde", value: parseFr(worldRow[statKey]), level: "world" } : null, continentRow ? { label: continent, value: parseFr(continentRow[statKey]), level: "continent" } : null, subregionRow ? { label: subregion, value: parseFr(subregionRow[statKey]), level: "subregion" } : null, { label: countryRow["Pays"], value: parseFr(countryRow[statKey]), level: "country" } ].filter(d => d && d.value != null); }35:T676,tooltipDotPlot = function(items, choroObj) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.value); const scaleMin = choroObj.breaks[0]; const scaleMax = choroObj.breaks[choroObj.breaks.length - 1]; const width = 220; const labelW = 80; const valueW = 50; const trackX0 = labelW + valueW + 5; const trackWidth = width - trackX0 - 6; const rowHeight = 17; const height = sorted.length * rowHeight + 0; const x = (v) => trackX0 + ((v - scaleMin) / (scaleMax - scaleMin)) * trackWidth; const rowsSvg = sorted.map((d, i) => { const y = 8 + i * rowHeight; const cx = x(d.value); const isCountry = d.level === "country"; const dotColor = choroObj.colorize(d.value); const dotRadius = isCountry ? 5 : 3; const dotStroke = isCountry ? "#222330" : "none"; const dotStrokeWidth = isCountry ? 1 : 0; const labelWeight = isCountry ? "600" : "400"; return ` ${d.label.length > 15 ? d.label.slice(0, 15) + "…" : d.label} ${d.value.toFixed(1).replace(".", ",")} `; }).join(""); return ``; }36:T40c,tooltipListLight = function(items, choroObj) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.value); const rows = sorted.map(d => { const isCountry = d.level === "country"; const dotColor = choroObj.colorize(d.value); const dotSize = isCountry ? 8 : 5; const dotBorder = isCountry ? "1px solid #222330" : "none"; const weight = isCountry ? "600" : "400"; return `

${d.label} ${d.value.toFixed(1).replace(".", ",")}

`; }).join(""); return `

${rows}

`; }37:Tdd5, 38:T3778,function legendClasses(source, { length = 200, // longueur de la rampe (axe principal, selon orientation) thickness = 16, // épaisseur des rectangles de couleur tickSize = 5, decimals = 0, // nombre de décimales (0 à 3), ignoré si "format" fourni decimalSeparator = ".", // "." ou ",", ignoré si "format" fourni format = null, // si fourni, prend le dessus sur decimals/decimalSeparator minLabelSpacing = 6, // marge de respiration mini entre labels (en plus de leur largeur mesurée) title = null, orientation = "horizontal", // "horizontal" | "vertical" labelReserve = 34, // espace réservé aux labels en mode vertical noData = null, // { label, color, show, stroke, strokeWidth }. Si null, auto-détecté depuis "source" (geoviz) cssWidth = null, // --- sélection groupée ("tout sélectionner / tout désélectionner") --- selectAll = false, // affiche le bouton tout sélectionner/désélectionner lang = "fr", // "fr" | "en" | "jp" labels = {}, // surcharge ponctuelle du dictionnaire de traduction (ex: { selectAll: "..." }) // --- options esthétiques --- fontSize = null, // taille des labels : nombre (px) OU chaîne CSS ("clamp(9px, 1vw, 12px)"...). null = défaut CSS (10px) titleFontSize = null, // taille du titre : nombre (px) OU chaîne CSS. null = calc(fontSize * 1.2) selectAllFontSize = null, // taille du bouton tout sélectionner/désélectionner : nombre (px) OU chaîne CSS. null = fontSize fontFamily = null, // police des labels/titre. null = défaut CSS (sans-serif) strokeColor = "#fff", // couleur du contour entre les classes de la rampe strokeWidth = 0.5, // épaisseur du contour entre les classes de la rampe deselectedColor = null, // couleur unie pour les classes désélectionnées. null = comportement par défaut (opacité réduite) deselectedOpacity = 0.25 // opacité appliquée aux classes désélectionnées si deselectedColor n'est pas fourni } = {}) { const isVertical = orientation === "vertical"; const width = length; // alias interne, garde le corps de fonction lisible const height = thickness; // --- dictionnaire de traduction, même principe que legend() --- const dict = { fr: { selectAll: "Tout sélectionner", deselectAll: "Tout désélectionner" }, en: { selectAll: "Select all", deselectAll: "Select none" }, jp: { selectAll: "すべて選択", deselectAll: "すべて選択を解除" } }; const t = { ...(dict[lang] ?? dict.fr), ...labels }; const iconAllOn = ``; const iconAllOff = ``; // format construit à partir de decimals/decimalSeparator, sauf si "format" est fourni const fmt = format || ((v) => { const s = d3.format(`.${decimals}f`)(v); return decimalSeparator === "," ? s.replace(".", ",") : s; }); // --- résolution de la source : scale d3 classique OU objet { breaks, colors } (type geoviz choro()) --- const isD3Scale = typeof source?.range === "function" && typeof source?.invertExtent === "function"; const isBreaksColors = Array.isArray(source?.breaks) && Array.isArray(source?.colors); let colors, classes, colorize, autoNoData = null; if (isD3Scale) { colors = source.range(); classes = colors.map((color, i) => { const [x0, x1] = source.invertExtent(color); return { index: i, x0, x1, color }; }); colorize = (value) => colors.indexOf(source(value)); } else if (isBreaksColors) { const breaks = source.breaks; colors = source.colors; classes = colors.map((color, i) => ({ index: i, x0: breaks[i], x1: breaks[i + 1], color })); colorize = typeof source.colorize === "function" ? (value) => classes.findIndex(c => c.color === source.colorize(value)) : (value) => { if (value == null || Number.isNaN(value)) return -1; for (let i = 0; i < classes.length; i++) { const { x0, x1 } = classes[i]; const inRange = i === classes.length - 1 ? (value >= x0 && value <= x1) : (value >= x0 && value < x1); if (inRange) return i; } return -1; }; if (source.missing) { autoNoData = { label: "Pas de données", color: source.missing_fill || "#ccc", show: true }; } } else { throw new Error( "legendClasses: source non reconnue. Attendu : une échelle d3 (.range()/.invertExtent()) ou un objet { breaks, colors }." ); } const n = colors.length; const segSize = width / n; const active = new Set(classes.map(c => c.index)); // --- config "pas de données" : fusion entre l'auto-détection (geoviz) et les surcharges explicites --- const resolvedNoData = (autoNoData || noData) ? { ...autoNoData, ...noData } : null; const showNoData = !!(resolvedNoData && resolvedNoData.show !== false); const noDataColor = (resolvedNoData && resolvedNoData.color) || "#ccc"; const noDataLabel = (resolvedNoData && resolvedNoData.label) || "Pas de données"; const noDataStroke = (resolvedNoData && resolvedNoData.stroke) || "#999"; const noDataStrokeWidth = (resolvedNoData && resolvedNoData.strokeWidth) ?? strokeWidth; const noDataWidth = isVertical ? height : segSize; const noDataHeight = height; const noDataGap = 10; // --- dimensions totales du SVG (viewBox) --- let svgWidth, svgHeight; if (!isVertical) { svgWidth = width; svgHeight = height + tickSize + 16 + (showNoData ? noDataGap + noDataHeight : 0); } else { svgWidth = Math.max(height + tickSize + labelReserve, showNoData ? noDataWidth + 90 : 0); svgHeight = width + (showNoData ? noDataGap + noDataHeight : 0); } // --- DOM --- const root = html`

`; root.style.width = "100%"; if (fontSize !== null) { root.style.setProperty("--legend-font-size", typeof fontSize === "number" ? `${fontSize}px` : fontSize); } if (titleFontSize !== null) { root.style.setProperty("--legend-title-font-size", typeof titleFontSize === "number" ? `${titleFontSize}px` : titleFontSize); } if (selectAllFontSize !== null) { root.style.setProperty("--legend-selectall-font-size", typeof selectAllFontSize === "number" ? `${selectAllFontSize}px` : selectAllFontSize); } if (fontFamily !== null) { root.style.setProperty("--legend-font-family", fontFamily); } if (cssWidth) { root.style.maxWidth = "none"; root.style.width = cssWidth; } else if (!isVertical) { root.style.maxWidth = `${width}px`; } else { root.style.maxWidth = `${svgWidth}px`; } // --- header : titre + bouton "tout sélectionner/désélectionner", même agencement que legend() --- let selectAllBtn = null; if (title || selectAll) { const header = html`

`; if (title) { header.appendChild(html`

${title}

`); } if (selectAll) { selectAllBtn = html`