工具提示中的 d3.js 格式编号

Question

I'm building a d3 graph with a tooltip which needs to display the number of units. I need to format the numbers so they look like "Units: 225,247" rather than what I'm getting now which is "Units: 225247".

var div = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);

Then

 rect.data(data)
        .enter().append('rect')
        .attr('width', (d, i) => x(d.units))
        .attr('height', y.bandwidth)
        .attr('y', (d, i) => y(d.sizeBand))//connects 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 know the format code I need is d3.format(',d') but I don't know where to place it or how to use it in a tooltip.

I hope this makes sense (This is my first project in D3 in my first web dev job)

Answer 1

d3.format(',d') sets a function so one way to use it is to define as a variable and then call it later

const formater =  d3.format(',d');
formater(NUMBER TO FORMAT);

on your example, apply to the numbers that make sense, I'm not sure which numbers you want to format, but you will get the idea.

 const formater =  d3.format(',d');
 div.html('<p> Units: '+ formater(d.units) +'</p>' + '<p> Size Band: '+ formater(d.sizeBand) + '</p>')                    
     .style('left', (d3.event.pageX - 50) + 'px')
     .style('top', (d3.event.pageY - 100) + 'px')