使用 D3 时未出现附加文本

Question

我试图让这个文本在鼠标悬停时显示，但它不起作用，谁能提供一些见解？文档中有多个圆圈，我希望每个圆圈在鼠标悬停时显示开销文本。当前表单应该到处显示“你好”，但什么都没有。

  d3.selectAll("circle")
    .on("mouseover",function(d){

    var x = parseFloat( d3.select(this).attr("cx") );
    var y = parseFloat( d3.select(this).attr("cy") );

    d3.selectAll("circle")
       .append("text")
       .attr("class","tooltipText")
       .attr("x",x)
       .attr("y",y)
       .attr("stroke-width",1)
       .attr("fill", "white")
       .attr("font-size", "13px")
       .attr("text-anchor", "middle")

       .text(function(){

          return "hello";

       });

    });

Answer 1

您应该将您的圈子封装在 g 元素中。这些将充当 HTML 中的<div> 标记。您可以为这些元素添加class 属性，以便之后轻松选择它们。

//circles creation
var circles = d3.selectAll('svg').append('svg')
              .append('g').attr('class', 'circles').data( someData );

circles.enter().append('g').attr('class', 'circle')
               .append('circle')
                 .attr('cx', function(d) { return xScale(d); })
                 .attr('cy', function(d) { return yScale(d); })
               .append('text').attr('style', 'display:none;')
                 .text(function(d) { return d.title; })
                 .attr('x', function(d) { return xScale(d); })
                 .attr('y', function(d) { return yScale(d) + 2*radius(d); });

d3.selectAll('.circle').on('mouseover', function( data, index, element ) {
    d3.select( element ).attr('style', '');
});

注意xScale, yScale, radius都是数据的函数。