d3图表添加子类：d3-tip提示框三角箭头不显示问题

• JS代码逻辑错误：.attr("class", ":after")会直接覆盖tooltip元素原本的d3-tip类名，导致后续CSS的.d3-tip:after选择器完全无法匹配到目标。同时:after是CSS伪元素，不存在于DOM树中，根本无法通过JS的.style()方法直接设置样式，你在链式调用中写的一长串针对伪元素的style配置全部无效，还存在转义符错误。
• CSS样式缺失关键属性：.d3-tip元素本身没有设置position: relative，伪元素设置的position: absolute会向上查找最近的定位父级作为参照，导致定位偏移；同时伪元素没有设置left、bottom等偏移值，就算匹配到元素也会出现在错误位置，无法正常显示在tooltip底部。

1. 删掉d3Tip初始化代码中所有针对伪元素的错误配置，仅保留tooltip本体的样式，同时给tooltip本体加上相对定位作为伪元素的定位参照：

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")
  .style("position", "relative")
  .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;
  });

2. 补全CSS中伪元素的定位属性，让三角固定在tooltip底部居中位置，和柱状图刚好衔接：

.d3-tip:after {
  box-sizing: border-box;
  display: block;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  margin: 0;
}

3. 强制刷新浏览器缓存后重新加载页面，小三角即可正常渲染。

内容的提问来源于stack exchange，提问作者C Sharper