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

Question

以下是在工具栏上显示的带有工具提示的条形图。使用d3-tip api显示悬停工具提示。

如何删除三角形符号，即\ 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: "\25BD";
        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>

以下是在工具栏上显示的带有工具提示的条形图。使用d3-tip api显示悬停工具提示。如何删除三角形符号的\ 25BD顶部边框，留下倾斜的边缘。即最后应该是...

Answer 1

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

Answer 2

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