我有一個離散資料的顏色圖例，它是使用 SVG 完成的。但是我在顯示整個內容時遇到了問題，因為它被裁剪了。我無法定義固定高度，因為內容是動態的。
僅供參考：我的代碼是用反應撰寫的
注意：我可以給出溢位：可見并使內容可見，但問題再次出現在給出背景顏色（背景顏色不適用于溢位的內容）。
代碼鏈接：https : //jsfiddle.net/rb4p9max/4/
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
select(legend)
.append("svg")
.attr("height", 100 "%")
.attr("width", 100 "%")
.style("background-color", "black")
.style("border-radius", "5px")
.call(colorLegend);
}
return (
<div style={{position: "absolute",right: 16,top: 10,backgroundColor:
"grey"}}>
<div id="legend"></div>
</div>
);
uj5u.com熱心網友回復：
僅用 React 代碼中的一個小例子就很難回答這個問題。但是，根據您提交的小提琴，您可以設定固定高度，但要根據您擁有的圖例數量。就像是：
height: calc(22px * 7 (4px * 6));
解釋數字：22px * 7 是因為每個正方形的高度為 22px。4px * 6 占底部邊距。最后一個不需要底部邊距。
https://jsfiddle.net/gzebj1qn/
因此，最終的代碼將類似于：
height: calc(22px * ${legends.length} (4px * ${legends.length -1}));
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/372303.html