How to use the d3.format function in d3

});
      chart.lines.duration(0);
      chart.brushExtent(options.startingBrush);
      chart.interactiveLayer.tooltip.valueFormatter(d => {
        const out = d ? `${Math.round(d * 1000) / 10}%` : "--";
        return out;
      });

      // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly
      // return themselves, not the parent chart, so need to chain separately

      // chart.xAxis.axisLabel('Wavelength (nm)');

      chart.yAxis
        .axisLabel("Normalized Ex/Em/Transmission")
        .tickFormat(d3.format("1%"))
        .axisLabelDistance(25);

      svg.datum(data).call(chart);

      chart.focus.dispatch.on("brush", () => {
        updateGlobalGradient();
      });

      chart.dispatch.on("stateChange", () => {
        chart.update();
      });

      const slider = document.getElementById("y-zoom-slider");
      noUiSlider.create(slider, {
        start: [1], // 4 handles, starting at...
        behaviour: "tap-drag", // Move handle on tap, bar is draggable

$$.tooltip.color(d => d3.rgb($$.color(d.data)).darker(0.3));

    const selection = (context.selection)? context.selection() : context;

    selection.each(function (datum) {
      update.call(this, datum, context !== selection ? context : null);
    });

    selection.dispatch('chart-pie-updated', {bubbles: true});

    return chart;
  };

  // percent formater
  const percent = d3.format('.0%');

  // configure model properties
  base(chart, $$)
    .addProp('chartFrame', chartFrame().legendEnabled(true).breadcrumbsEnabled(false))
    .addProp('legend', legend().clickable(true).dblclickable(true))
    .addProp('key', d => d.label)
    .addProp('pie', svgPie())
    .addProp('tooltip',
      tooltip()
        .followMouse(true)
        .html(d =&gt; `<b>${$$.label(d.data)}</b>: ${$$.value(d.data)} (${percent(d.__percent__)})`)
    )
    .addPropFunctor('values', d =&gt; d)
    .addPropFunctor('duration', 250)
    .addPropFunctor('donutRatio', 0)
    .addPropFunctor('at', 'center center')

const plotDim = [currentFrame.dimension().width, currentFrame.dimension().height];

            const myChart = beeswarmChart
                .draw()
                .seriesNames(seriesNames)
                .projectionDates(projectionDates);

            // set up y-axis for this frame
            myYAxis
                .plotDim(plotDim)
                .banding(yBanding)
                .domain([yMin, yMax])
                .range([currentFrame.dimension().height, 0])
                .numTicks(numTicksy)
                .tickSize(tickSize)
                .tickFormat(d3.format('.1f'))
                .align(yAxisAlign)
                .rem(currentFrame.rem())
                .frameName(frameName)
                .invert(invert)
                .logScale(logScale);

            currentFrame.plot().call(myYAxis);

            // return the value in the variable newMargin and move axis if needed
            if (yAxisAlign === 'right') {
                const newMargin = myYAxis.labelWidth() + currentFrame.margin().right;
                // Use newMargin redefine the new margin and range of xAxis
                currentFrame.margin({ right: newMargin });
            }
            if (yAxisAlign === 'left') {
                const newMargin = myYAxis.labelWidth() + currentFrame.margin().left;

function ComputeCountAxisDomain(extent: Extent): AxisDomain {
  const axisDomain = computeAxisDomain(extent);

  // For numbers larger than 1, the tooltip displays fractional values with
  // metric multiplicative prefixes (e.g. kilo, mega, giga). For numbers smaller
  // than 1, we simply display the fractional value without converting to a
  // fractional metric prefix; this is because the use of fractional metric
  // prefixes (i.e. milli, micro, nano) have proved confusing to users.
  const metricFormat = d3.format(".4s");
  const decimalFormat = d3.format(".4f");
  axisDomain.guideFormat = (n: number) => {
    if (n < 1) {
      return decimalFormat(n);
    }
    return metricFormat(n);
  };

  return axisDomain;
}

import React, { Component } from 'react';
import { StickyTable, Row, Cell } from './sticky-table'
import './index.css';

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import faAngleUp from '@fortawesome/fontawesome-free-solid/faAngleUp'
import faAngleDown from '@fortawesome/fontawesome-free-solid/faAngleDown'

var d3 = require("d3");

var numberWithCommas = d3.format(",");

class TcTable extends Component {

  renderCell(value, type){
    if (value == null) {
      return <div>;
    }
    switch (type) {
      case "string":
        return (
          <div style="{{&quot;position&quot;:&quot;relative&quot;}}">
            <div> this.divClick(e)}&gt;
              <span> this.spanClick(e)}&gt;
                { value }
              </span>
            </div></div></div>

var update = function(data) {
      if (typeof data === 'undefined') {
        return;
      }

      chart = nv.models.scatterChart()
        .duration(300);

      chart.xAxis.tickFormat(function(d) { return d3.time.format('%m/%d %H:%M')(new Date(d)); });
      if (attrs.forceY) {
        chart.forceY(angular.fromJson(attrs.forceY));
      }
      if (attrs.tickFormatX) {
        chart.yAxis.tickFormat(d3.format(attrs.tickFormatX));
      }
      if (attrs.tickFormatY) {
        chart.yAxis.tickFormat(d3.format(attrs.tickFormatY));
      }

      svg.datum(data).call(chart);
    };

    .tickFormat(d => d3.format(yAxisConfig.format || 's')(d))
    .tickSize(-env.width)

export function countFilter (value) {
  return d3.format(',')(value);
}
export function prefixCountFilter (value) {

.select('div.info-diagram-placeholder')
      .classed(style.hidden, true);
    d3.select(model.container)
      .select('svg.information-diagram')
      .classed(style.informationDiagramSvgHide, false)
      .classed(style.informationDiagramSvgShow, true);

    const outerHistoRadius = Math.min(width, height) / 2;
    const veryOutermostRadius = outerHistoRadius + 80;
    const histoRadius = outerHistoRadius - 20;
    const outerRadius = histoRadius - 50;
    const innerRadius = outerRadius - 24;
    const deltaRadius = outerRadius - innerRadius;

    const formatPercent = d3.format('.1%');
    const formatMI = d3.format('.2f');
    const formatVal = d3.format('.2s');

    const arc = d3.svg
      .arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    const histoArc = d3.svg.arc().innerRadius(outerRadius + 10);

    const insideArc = d3.svg
      .arc()
      .innerRadius(1)
      .outerRadius(innerRadius);

    const layout = d3.layout
      .chord()

    .tickFormat(d => `${d3.format('$')(parseInt(d / 1000000))}M`)