I'm currently working on a d3 graph that includes a tooltip showcasing the number of units. My goal is to format these numbers in a way that they appear as "Units: 225,247" rather than the current format of "Units: 225247."
var div = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
Next,
rect.data(data)
.enter().append('rect')
.attr('width', (d, i) => x(d.units))
.attr('height', y.bandwidth)
.attr('y', (d, i) => y(d.sizeBand))//connected to data map
.style('fill', d => colorScale(d.units))
.on('mouseover', function(d, i, n){
d3.select(n[i])
.transition()
.duration(100)
.style('opacity', 0.7);
div.transition()
.duration(200)
.style('opacity', 0.9);
div.html('<p> Units: '+ d.units +'</p>' + '<p> Size Band: '+ d.sizeBand + '</p>')
.style('left', (d3.event.pageX - 50) + 'px')
.style('top', (d3.event.pageY - 100) + 'px')
})
.on('mouseout', function(d, i, n){
d3.select(n[i])
.transition()
.duration(50)
.style('opacity', 1)
.style('fill', d => colorScale(d.units))//color scale
div.transition()
.duration(500)
.style('opacity', 0)
})
I am aware that I need to use the format code d3.format(',d'), but I am unsure of where exactly to place it and how to integrate it into the tooltip.
I hope this explanation is clear. This project represents my first venture into D3 during my initial web development role.