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都是数据的功能。

使用D3时不会出现附加文本

1 个答案: