Front-end - Encapsulating the data.format function of d3 encountered problems

Question

I encountered some problems when using the tooltip.format.value function of c3.js. I need to encapsulate a function myself. A drop-down list is directly presented in the DOM. The user can select the value to set the format.
There are four Options, $, thousands place, accurate to two decimal places or other digits, set both $ and thousands place ($6789,000)

The framework uses angularjs, and I encapsulated a function in the directive

function dataFormat() {
                var tooltipFormatValue = [];
                tooltipFormatValue[0] = {'$':d3.format("$")};
                tooltipFormatValue[1] = {'thousands separator':d3.format("s")};//千位符
                tooltipFormatValue[2] = {'precision':d3.format(".2f")};//精确小数点后面两位
                tooltipFormatValue[3] = {'$ and thousands separator': d3.format("$ | currency: $")};//带$和千位符
                console.log(tooltipFormatValue)
                d3.format = {
                  value: function(value,id,name) {
                    var format = id === name ? d3.format(','):d3.format(',');
                    return format(value);
                  }
                }
              }

**1. How to set the format of $ and thousand characters at the same time?
2. I don’t know if my function idea is right or not, my thoughts are very confusing at the moment**

Answer 1

1. How to set the format of $ and thousand characters at the same time?
d3.format('$,')(value)