使用 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元素内。这些将充当<div>HTML 中的标签。您可以向这些元素添加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都是数据的函数。