我試圖在工具提示下方和欄上方添加小三角形。
為此，我正在關注這份檔案 - http://bl.ocks.org/caged/6476579
對于工具提示，我寫了下面的代碼 -
var tip = d3Tip()
.attr("class", "d3-tip")
.style("line-height", 1)
.style("font-weight", "bold")
.style("padding", "12px")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "#fff")
.style("border-radius", "2px")
.attr("class", ":after")
.style("box-sizing", "border-box")
.style("display", "inline")
.style("font-size", "10px")
.style("width", "100%")
.style("color", "rgba(0, 0, 0, 0.8)")
.style("content", "\\25BC")
.style("position", "absolute")
.style("text-align", "center")
.offset([-10, 0])
.html(function (_data, indexedData) {
var htmlToolTip = "";
keys.map((key, index) => {
htmlToolTip =
"<strong>"
key
" : </strong> <span style='color:red'>"
indexedData.data[key "Value"]
"</span> <br>";
});
return htmlToolTip;
});
在這里，我正在嘗試添加以下類屬性-
/* 為工具提示創建一個小三角形擴展器 */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
但工具提示下方未添加三角形。
uj5u.com熱心網友回復：
你首先需要知道什么是':after'
在CSS 中，::after 或(:after) 創建了一個偽元素，它是被選元素的最后一個子元素。它通常用于向具有 content 屬性的元素添加裝飾性內容。默認情況下是行內的。
您在代碼中所做的是您只設定了 d3-tip 的樣式，并且 :after 沒有插入到該提示中。您假設 d3-tip 和 :after 是相同的元素，但它們是分開的。要插入它，您必須洗掉 :after 元素的 css（您將該 css 添加到您的提示父元素中）并稍后在實際的 :after 偽元素上插入它。在 d3 中，您可以使用d3.insert將子元素添加到類中。
您的代碼應如下所示
var tip = d3Tip()
.attr("class", "d3-tip")
.style("line-height", 1)
.style("font-weight", "bold")
.style("padding", "12px")
.style("background", "rgba(0, 0, 0, 0.8)")
.style("color", "#fff")
.style("border-radius", "2px")
.offset([-10, 0])
.html(function (_data, indexedData) {
var htmlToolTip = "";
keys.map((key, index) => {
htmlToolTip =
"<strong>"
key
" : </strong> <span style='color:red'>"
indexedData.data[key "Value"]
"</span> <br>";
});
return htmlToolTip;
});
d3.select('.d3-tip').insert(":after")
.style("box-sizing", "border-box")
.style("display", "inline")
.style("font-size", "10px")
.style("width", "100%")
.style("color", "rgba(0, 0, 0, 0.8)")
.style("content", "\\25BC")
.style("position", "absolute")
.style("text-align", "center");d3.select('.d3-tip').insert(":after")該陳述句將使其成為 d3-tip 的子元素，您可以對其進行樣式設定。我相信這將解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489715.html
標籤：javascript html jQuery 反应 d3.js