Question

这是我在树节点上鼠标悬停时显示工具提示的代码。

function mouseover(d) {
                d3.select(this).append("div")
                    .attr("class","tooltip")
                    .attr('transform', function(d){ 
                        return 'translate(5, -10)';
                    })
                    .text(d.name);
            }

这是我的工具提示本身的CSS

.tooltip {
            display: inline;
            position: relative;
        }

        .tooltip:hover {
            color: #c00;
            text-decoration: none;
        }

        .tooltip:hover:after {
            background: #111;
            background: rgba(0,0,0,.8);
            border-radius: .5em;
            bottom: 1.35em;
            color: #fff;
            content: attr(title);
            display: block;
            left: 1em;
            padding: .3em 1em;
            position: absolute;
            text-shadow: 0 1px 0 #000;
            white-space: nowrap;
            z-index: 98;
        }

        .tooltip:hover:before {
            border: solid;
            border-color: #111 transparent;
            border-color: rgba(0,0,0,.8) transparent;
            border-width: .4em .4em 0 .4em;
            bottom: 1em;
            content: "";
            display: block;
            left: 2em;
            position: absolute;
            z-index: 99;
        }

当鼠标悬停在节点上时，我无法看到工具提示。我是d3的新手。

问题是什么？

Answer 1

我为你创建了演示

＆＃13;

var svg = d3.select("body")
  .append("svg")
  .attr('height', '300px')
  .attr('width', '300px')

var bg = svg.append("g")
  .append('rect')
  .attr('height', '300px')
  .attr('width', '300px')
  .attr('fill', '#F00');

var tooltip = svg.append("g")
	.append('rect')
  .attr('height', '50px')
  .attr('width', '50px')
  .attr('fill', '#0F0');
  
bg.on('mousemove', function() {
var x = d3.mouse(this)[0] - 25;
var y = d3.mouse(this)[1] - 70
    tooltip
      .attr("transform", "translate(" + x + "," + y + ")")
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

d3 js工具提示悬停treenode无法渲染

1 个答案: