如何删除工具提示箭头边框

Question

下面是悬停时显示工具提示的条形图。使用 d3-tip api.

显示悬停工具提示

如何去除三角形符号的 ie \25BD 顶部边框留下斜边。即最后它应该像'V'形状没有顶部边框。

请在下面找到代码。只希望三角形 V 形和顶部矩形工具提示之间没有边框。

      var dataset = [
          {
            value: 21,
            title: "title 1",
            sub_title: "sub title 1",
          },
          {
            value: 31,
            title: "title 2",
            sub_title: "sub title 2",
          },
          {
            value: 22,
            title: "title 3",
            sub_title: "sub title 3",
          },
          {
            value: 17,
            title: "title 4",
            sub_title: "sub title 4",
          },
          {
            value: 25,
            title: "title 5",
            sub_title: "sub title 5",
          },
          {
            value: 18,
            title: "title 6",
            sub_title: "sub title 6",
          },
          {
            value: 29,
            title: "title 7",
            sub_title: "sub title 7",
          },
          {
            value: 14,
            title: "title 8",
            sub_title: "sub title 8",
          },
          {
            value: 9,
            title: "title 9",
            sub_title: "sub title 9",
          },
        ],
        width = 400,
        height = 120;

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid grey");

      var rects = svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function (d, i) {
          return i * 30;
        })
        .attr("y", function (d) {
          return height - 3 * d.value;
        })
        .attr("width", 25)
        .attr("height", function (d) {
          return 3 * d.value;
        })
        .attr("fill", "navy");

      /* Initialize tooltip */
      tip = d3
        .tip()
        .attr("class", "d3-tip")
        .offset([-10, 0])
        .html(function (d) {
          return "<div>" + d.title + "<br/>" + d.sub_title + "</div>";
        });

      /* Invoke the tip in the context of your visualization */
      rects.call(tip);
      rects.on("mouseover", tip.show).on("mouseout", tip.hide);

      .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(255, 255, 255, 1);
        color: #000;
        border: 1px solid black;
        border-radius: 2px;
      }
      /* 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: "BD";
        position: absolute;
        text-align: center;
      }
      /* Style northward tooltips differently */
      .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 1

我对你的 css 的最后一部分做了一些修改，更改了内容并添加了一个新的 css 形状

这是你要找的吗？

      var dataset = [
          {
            value: 21,
            title: "title 1",
            sub_title: "sub title 1",
          },
          {
            value: 31,
            title: "title 2",
            sub_title: "sub title 2",
          },
          {
            value: 22,
            title: "title 3",
            sub_title: "sub title 3",
          },
          {
            value: 17,
            title: "title 4",
            sub_title: "sub title 4",
          },
          {
            value: 25,
            title: "title 5",
            sub_title: "sub title 5",
          },
          {
            value: 18,
            title: "title 6",
            sub_title: "sub title 6",
          },
          {
            value: 29,
            title: "title 7",
            sub_title: "sub title 7",
          },
          {
            value: 14,
            title: "title 8",
            sub_title: "sub title 8",
          },
          {
            value: 9,
            title: "title 9",
            sub_title: "sub title 9",
          },
        ],
        width = 400,
        height = 120;

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid grey");

      var rects = svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function (d, i) {
          return i * 30;
        })
        .attr("y", function (d) {
          return height - 3 * d.value;
        })
        .attr("width", 25)
        .attr("height", function (d) {
          return 3 * d.value;
        })
        .attr("fill", "navy");

      /* Initialize tooltip */
      tip = d3
        .tip()
        .attr("class", "d3-tip")
        .offset([-10, 0])
        .html(function (d) {
          return "<div>" + d.title + "<br/>" + d.sub_title + "</div>";
        });

      /* Invoke the tip in the context of your visualization */
      rects.call(tip);
      rects.on("mouseover", tip.show).on("mouseout", tip.hide);

      .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(255, 255, 255, 1);
        color: #000;
        border: 1px solid black;
        border-radius: 2px;
      }
      /* 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: "BD";
        position: absolute;
        text-align: center;
      }
      /* Style northward tooltips differently */
.d3-tip.n:after {
    content: '';
    margin: 0px 0px 0 0;
    top: 52px;
    left: 40px;
    height: 10px;
    width: 10px;
    background: #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如何删除工具提示箭头边框

How to remove tooltip arrow border

css

tooltip

d3.js