6

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

       });

    });
user2483724
  • 2,089
  • 5
  • 27
  • 43
  • [This answer](http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220#10806220) may help. – Lars Kotthoff Jun 13 '13 at 20:10
  • This portion is just confusing me because there are no errors. (console.logs for all the variables also work) but there is nothing showing. – user2483724 Jun 13 '13 at 20:42
  • It won't show if you append a `text` object to a `circle`. See [here](http://stackoverflow.com/questions/17095409/text-doesnt-appear-in-dom-object/17095629#17095629). – Lars Kotthoff Jun 13 '13 at 20:45
  • Ah I see, I had it working for individual circles using svg.append but wanted to append the text to all circles simultaneously. Could I give each circle a class name and select that? – user2483724 Jun 13 '13 at 20:51
  • Just to add, each portion of the document is a group, but each group is composed of rectangles and circles. I only want the labels to appear on the circles. (but all the circles across all the groups) – user2483724 Jun 13 '13 at 20:56
  • As I've said -- `text` appended to `circle` will not work! You can either append a `title` to have a tooltip or you will need to append the `text` to the `g` or something like that. – Lars Kotthoff Jun 13 '13 at 20:58
  • OK, thanks for the help. I'm just trying to figure out a way to append text positioned with the circle coordinates so I have to select the circle somehow. I'll try title. – user2483724 Jun 13 '13 at 21:29
  • I know there is a way to select the parentNode of a selection. I'm working on a solution now. `d3.select("circle")[0].parentNode` should give you the `g` element that contains the circle. Trying to figure out a clever way to select all the `g` elements at once. – elsherbini Jun 13 '13 at 21:46
  • How about just assigning a group to them and then select by that? – Lars Kotthoff Jun 14 '13 at 08:28
  • Thanks for the tip elsherbini, currently reading through http://bost.ocks.org/mike/selection/ to figure out how groups and selections "really" work. – user2483724 Jun 17 '13 at 17:38

1 Answers1

2

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.

mor
  • 2,313
  • 18
  • 28
  • OK thanks =). I'm still trying to get a non-magical understanding of groups and selections. I now have 2 "charts" each being respectively groups "g1":[circle1_1,box1,circle1_2], "g2"[circle2_1,box2,circle2_2] which I select with (g1/g2) to change things like color, and "g3":[circle1_1,circle1_2,circle2_1,circle2_2] to do things to all the circles. – user2483724 Jun 17 '13 at 17:35
  • don't forget that you can always use simple css rules to change colors, stroke width, etc... – mor Jun 17 '13 at 22:47
  • 1
    why would it be that the elements don't show up if not encapsulated in group? sorry if this is obvious. – yifanwu Nov 03 '14 at 01:21
  • 2
    @yifanwu It's not that they don't show up, it's that transformations need to be applied to a group of elements so they are correctly positioned – mor Nov 25 '14 at 18:19