CODEWITHSUNDEEP
d3.js
user2483724
user2483724

Reputation: 2119

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

       });

    });

Upvotes: 6

Views: 13894

Answers (1)

mor
mor

Reputation: 2313

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', '');
});

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

Upvotes: 2

Related Questions