Appended text not appearing when using D3
13,356
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.
Author by
user2483724
Updated on June 16, 2022Comments
-
user2483724 almost 2 years
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"; }); });