Javascript Tooltip not showing up in box as define

2019-07-20 07:34发布

站内问答 / JavaScript
1506 1 4

I am working on a D3 treemap. I have added a tool tip that should be showing up in a box (see: http://bl.ocks.org/Caged/6476579). It shows up just as text, but doesn't show up in the box. What am I missing?

<HTML>
<HEAD>
  <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  <style type="text/css">
    rect {
      fill: none;
      stroke: #fff;
    }

    rect:hover {
      opacity: 0.5;
    }

    text {
      font-family: "Times New Roman", Times, serif;
      font-size: 12px;
    }
  </style>
  <style>
    body {
      font: 10px sans-serif;
    }

    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      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: "\25BC";
      position: absolute;
      text-align: center;
    }
    /* Style northward tooltips differently */

    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
  </style>

  <BODY>

    <div id="body"></div>
    <script type="text/javascript">
      var pathJson = {
        "name": "Sample data",
        "children": [{
          "name": "Title 1",
          "size": 1,
          "children": [{
            "name": "Title 1-1",
            "size": 1,
            "children": [{
              "name": "1-1-1",
              "size": 1
            }, {
              "name": "1-1-2",
              "size": 1
            }, {
              "name": "1-1-3",
              "size": 1
            }, {
              "name": "1-1-4",
              "size": 1
            }]
          }, {
            "name": "Title 1-2",
            "size": 1,
            "children": [{
              "name": "1-2-1",
              "size": 1
            }, {
              "name": "1-2-2",
              "size": 1
            }, {
              "name": "1-2-3",
              "size": 1
            }]
          }, {
            "name": "Title 1-3",
            "size": 1,
            "children": [{
              "name": "1-3-1",
              "size": 1
            }]
          }]
        }]
      }
      var w = 600 - 80,
        h = 500 - 100,
        x = d3.scale.linear().range([0, w]),
        y = d3.scale.linear().range([0, h]),
        color = d3.scale.category10(),
        root,
        node;
      var treemap = d3.layout.treemap()
        .round(false)
        .size([w, h])
        .sticky(true)
        .padding([10, 0, 0, 0])
        .value(function(d) {
          return d.size;
        });
      var svg = d3.select("#body").append("div")
        .attr("class", "chart")
        .style("width", w + "px")
        .style("height", h + "px")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(.5,.5)");
      var tip = d3.tip()
        .offset([20, 0])
        .html(function(d) {
          return "<strong>Project:</strong> <span style='color:red'>" + d.name + "</span>";
        })
      svg.call(tip);
      node = root = pathJson;
      var nodes = treemap.nodes(root)
        .filter(function(d) {
          return !d.children;
        });
      var cell = svg.selectAll("g")
        .data(nodes)
        .enter().append("svg:g")
        .attr("class", "cell")
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        })
        .on("click", function(d) {
          return zoom(node == d.parent ? root : d.parent);
        })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);
      cell.append("svg:rect")
        .attr("width", function(d) {
          return d.dx - 1;
        })
        .attr("height", function(d) {
          return d.dy - 1;
        })
        .style("fill", function(d) {
          return color(d.parent.name);
        });
      cell.append("svg:text")
        .attr("x", function(d) {
          return d.dx / 2;
        })
        .attr("y", function(d) {
          return d.dy / 2;
        })
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function(d) {
          return d.name;
        })
        .style("opacity", function(d) {
          d.w = this.getComputedTextLength();
          return d.dx > d.w ? 1 : 0;
        });
      d3.select(window).on("click", function() {
        zoom(root);
      });
      d3.select("select").on("change", function() {
        treemap.value(this.value == "size" ? size : count).nodes(root);
        zoom(node);
      });

      function size(d) {
        return d.size;
      }

      function count(d) {
        return 1;
      }

      function zoom(d) {
        //alert(d.name);
        var kx = w / d.dx,
          ky = h / d.dy;
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);
        var t = svg.selectAll("g.cell").transition()
          .duration(d3.event.altKey ? 7500 : 750)
          .attr("transform", function(d) {
            return "translate(" + x(d.x) + "," + y(d.y) + ")";
          });
        t.select("rect")
          .attr("width", function(d) {
            return kx * d.dx - 1;
          })
          .attr("height", function(d) {
            return ky * d.dy - 1;
          })
        t.select("text")
          .attr("x", function(d) {
            return kx * d.dx / 2;
          })
          .attr("y", function(d) {
            return ky * d.dy / 2;
          })
          .style("opacity", function(d) {
            return kx * d.dx > d.w ? 1 : 0;
          });
        //.style("font-size", function(d) { return kx * d.dx > d.w ? "20px" : "12px";});
        node = d;
        d3.event.stopPropagation();
      }
    </SCRIPT>
  </BODY>
</htmL>

1条回答
趁早两清
2楼-- · 2019-07-20 08:02

Everything is fine, but you missed adding class to d3.tip() as below

.attr('class', 'd3-tip')

var tip = d3.tip()
  .attr('class', 'd3-tip') // <---- missing this 
  .offset([20, 0])
  .html(function(d) {
    return "<strong>Project:</strong> <span style='color:red'>" + d.name + "</span>";
  });
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)