Estaba tratando de agregar un pequeño triángulo debajo de la información sobre herramientas y encima de la barra.
Para eso estaba siguiendo este documento: http://bl.ocks.org/caged/6476579
Para información sobre herramientas, he escrito debajo del código:
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; });Aquí, estoy tratando de agregar las siguientes propiedades de clase-
/* Crea un extensor de triángulo pequeño para la información sobre herramientas */
.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; }Pero el triángulo no se agrega debajo de la información sobre herramientas.
Primero necesitas saber qué es ':después'
En CSS, ::after o (:after) crea un pseudoelemento que es el último hijo del elemento seleccionado. A menudo se usa para agregar contenido cosmético a un elemento con la propiedad de contenido. Está en línea por defecto.
Lo que está haciendo en su código es que está diseñando solo d3-tip y: after no se inserta en ninguna parte en esa sugerencia. Está asumiendo que d3-tip y: after son los mismos elementos pero están separados. Para insertar eso, tendrá que eliminar css de: después del elemento (está agregando ese css a su elemento principal de sugerencia) e insertarlo más tarde en el pseudoelemento real: después. En d3, puede usar d3.insert para agregar un elemento secundario a la clase.
Su código debería verse como a continuación
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") Esta declaración lo convertirá en hijo del d3-tip y puede diseñarlo. Estoy seguro de que esto solucionará su problema.