Add a subclass in d3 chart hierarchy-CodePudding

I was trying to add small triangle below tooltip and above bar.

For that I was following this document - http://bl.ocks.org/caged/6476579

For tooltip , I have written below code -

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;
  });

Here , I am trying to add below class properties-

/* Creates a small triangle extender for the tooltip */

.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;
}

But triangle not getting added below tooltip.

CodePudding user response：

You first need to know what is ':after'
In CSS, ::after or (:after) creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

What you are doing in your code is that you are styling only d3-tip and :after is nowhere inserted in that tip.You are assuming d3-tip and :after are same elements but they are seperate. To insert that you will have to do remove css of :after element(you are adding that css to your tip parent element) and insert it later on the actual :after pseudoelement. In d3, you can use d3.insert to add a child element to the class.

Your code should look like below

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") This statement will make it child of the d3-tip and you can style it. I am sure this will fix your issue.