Как убрать всплывающую подсказку с стрелки - PullRequest
Новая
       19

Как убрать всплывающую подсказку с стрелки

0 голосов
/ 20 апреля 2020

Ниже приведена гистограмма с всплывающей подсказкой, отображаемой при наведении курсора. всплывающая подсказка отображается с помощью d3-tip api.

, как удалить верхнюю границу ie \ 25BD символа треугольника, оставляя наклонные края. ie наконец, он должен иметь форму ' 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>

1 Ответ

0 голосов
/ 20 апреля 2020

Я внес некоторые изменения в последнюю часть вашего 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: "\25BD";
        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>
...