使用D3时未出现附加文字 [英] Appended text not appearing when using D3

问题描述

我正试图让此文本在鼠标悬停时显示，但无法正常工作，任何人都可以提供一些见解吗?文档中有多个圆圈，我希望每个圆圈在鼠标悬停时显示顶部的文本.当前表单应该到处都显示你好"，但是什么也没有.

I'm trying to get this text to display on mouseover but it's not working, can anyone give some insights? There are multiple circles in the document and I want each one to display overhead text on mouseover. Current form should be displaying "hello"s everywhere but there's nothing.

  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";

       });

    });

推荐答案

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

You should encapsulate your circles inside of g elements. These will act as <div> tags in HTML. You can add a class attribute to these elements so they will be easily selected afterwards.

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

Notice that xScale, yScale, radius are all function of the data.

这篇关于使用D3时未出现附加文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！