How to use the d3-fetch.json function in d3-fetch

return () => {
          json(data).then(d => {
            // console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      }

export function launchTopExpressed(tissueId, heatmapRootId, violinRootId, urls=getGtexUrls(), filterGenes=true){
    // getting the top expressed genes in tissueId
    const url = filterGenes?urls.topInTissueFiltered:urls.topInTissue;
    const $filterInfoDiv = $(`#filterInfo`).length==0?$('<div>').attr('id', 'filterInfo').appendTo('#messageBox'):$(`#filterInfo`);
    if(filterGenes) $filterInfoDiv.html("Mitochondrial genes are excluded.<br>");
    else $filterInfoDiv.html("Mitochondrial genes are included.<br>");

    json(url+ tissueId)
        .then(function(results){ // top 50 expressed genes in tissueId
            const attr = 'topExpressedGene';
            if(!results.hasOwnProperty(attr)){
                console.error(results);
                throw 'Parse Error: required json attribute is missing: ' + attr;
            }
            const topGeneList = results[attr].map((d)=&gt;{
                if(!d.hasOwnProperty('gencodeId')){
                    console.error(d);
                    throw 'Parse Error: required json attribute is missing: gencodeId';
                }
                return d.gencodeId
            });
            const callback = function(){
                _styleSelectedTissue(tissueId);
            };</div>

if (k=='buttons' || k=='svg') return;
        $(`<div id="${domIds[k]}">`).appendTo(`#${rootId}`);
    });
    const urls = getGtexUrls();
   // get some data
    let gencode = "";
    if (rootId == "oneGene"){
        gencode = "ENSG00000106624.4";
    } else if (rootId == "twoGenes") {
        gencode = "ENSG00000065613.9,ENSG00000106624.4";

    } else {
        gencode = "ENSG00000065613.9,ENSG00000106624.4,ENSG00000120885.15";
    }

    Promise.all([json(urls.tissue), json(urls.geneExp + gencode)])
        .then(function(args){
            const tissueTable = parseTissues(args[0]).reduce((arr,d)=&gt;{arr[d.tissueId]=d; return arr},{});
            const data = parseGeneExpressionForViolin(args[1], true, colors);
            const sort = (a, b)=&gt;{
                if (a&gt;b) return 1;
                if (a</div>

context.pop = withDebouncedSave(history.pop);
    context.overwrite = withDebouncedSave(history.overwrite);
    context.undo = withDebouncedSave(history.undo);
    context.redo = withDebouncedSave(history.redo);

    ui = uiInit(context);

    connection = services.osm;
    background = rendererBackground(context);
    features = rendererFeatures(context);
    photos = rendererPhotos(context);
    presets = presetIndex(context);

    if (services.maprules && utilStringQs(window.location.hash).maprules) {
        var maprules = utilStringQs(window.location.hash).maprules;
        d3_json(maprules)
            .then(function(mapcss) {
                services.maprules.init();
                mapcss.forEach(function(mapcssSelector) {
                    return services.maprules.addRule(mapcssSelector);
                });
            })
            .catch(function() {
                /* ignore */
            });
    }

    map = rendererMap(context);
    context.mouse = map.mouse;
    context.extent = map.extent;
    context.pan = map.pan;
    context.zoomIn = map.zoomIn;

tiles.forEach(function(tile) {
            if (_krCache.loadedTile[tile.id] || _krCache.inflightTile[tile.id]) return;

            var rect = tile.extent.rectangle();
            var params = Object.assign({}, options, { left: rect[0], bottom: rect[3], right: rect[2], top: rect[1] });
            var url = _krUrlRoot + 'export.php?' + utilQsString(params) + '&ch=' + rules;

            var controller = new AbortController();
            _krCache.inflightTile[tile.id] = controller;

            d3_json(url, { signal: controller.signal })
                .then(function(data) {
                    delete _krCache.inflightTile[tile.id];
                    _krCache.loadedTile[tile.id] = true;
                    if (!data || !data.features || !data.features.length) {
                        throw new Error('No Data');
                    }

                    data.features.forEach(function(feature) {
                        var loc = feature.geometry.coordinates;
                        var props = feature.properties;

                        // if there is a parent, save its error type e.g.:
                        //  Error 191 = "highway-highway"
                        //  Error 190 = "intersections without junctions"  (parent)
                        var errorType = props.error_type;
                        var errorTemplate = errorTypes[errorType];

export function searchById(heatmapRootId, violinRootId, glist, tlist=undefined, urls=getGtexUrls(), filterGenes=undefined, callback=undefined, qTissue=undefined){
    $('#spinner').show();
    $(`#${heatmapRootId}`).empty(); // clear the root DOM content
    $(`#${violinRootId}`).empty(); // clear the root DOM content

    const MAX = 50;
    const $message = $('<div><br>').attr('class', 'col-xs-12 col-md-12').css('color', 'firebrick').appendTo(`#${heatmapRootId}`);
    let message = "";
    if (glist.length &gt; MAX) {
        message = `Warning: Too many genes. Input list truncated to the first ${MAX}. <br>`;
        glist = glist.slice(0, MAX);
    }
    Promise.all([json(urls.tissue), json(urls.geneId+glist.join(","))])
       .then(function(args){
           const tissues = parseTissues(args[0]);

           // genes
           const genes = parseGenes(args[1]);
           // error-checking
           message += _validateGenes(heatmapRootId, genes, glist);


           // get median expression data and clusters of the input genes in all tissues
           const gQuery = genes.map((g)=&gt;g.gencodeId).join(",");
           const tQuery = tlist===undefined?undefined:tlist.join(",");
           const fetchUrl = tQuery === undefined? urls.medGeneExp + "&amp;gencodeId=" + gQuery: urls.medGeneExp + "&amp;gencodeId=" + gQuery + "&amp;tissueSiteDetailId=" + tQuery;
           json(fetchUrl)
               .then(function(eData){
                   $('#spinner').hide();</div>

export default function renderMap(el, snapData) {
  const mapEl = select(el);

  json("/static/js/world-110m.v1.json")
    .then(ready)
    .catch(error => {
      throw new Error(error);
    });

  function render(mapEl, snapData, world) {
    const width = mapEl.property("clientWidth");
    const height = width * 0.5;
    // some offset position center of the map properly
    const offset = width * 0.1;

    const projection = geoNaturalEarth1()
      .scale(width * 0.2)
      .translate([width / 2, (height + offset) / 2])
      .precision(0.1);

let p1: Promise = d3Fetch.blob(url);
p1 = d3Fetch.blob(url, init);

let p2: Promise = d3Fetch.buffer(url);
p2 = d3Fetch.buffer(url, init);

let p3: Promise = d3Fetch.image(url);
const imageProperties = {
    width: '300px',
    height: '500px'
};
p3 = d3Fetch.image(url, imageProperties);

let p4: Promise = d3Fetch.json(url);
p4 = d3Fetch.json(url, init);
let p5: Promise = d3Fetch.json(url);
p5 = d3Fetch.json(url, init);

let myString: Promise;
myString = d3Fetch.text(url);
myString = d3Fetch.text(url, init);

const parseRow = (rawRow: DSVRowString, index: number, columns: string[]): (MyType | undefined | null) => {
    const myType: MyType | null = rawRow['foo'] ? { foo: rawRow['foo'] + '+ bar' } : null;
    return myType;
};
let promise1: Promise>;
let promise2: Promise>;
promise1 = d3Fetch.csv(url);
promise1 = d3Fetch.csv(url, init);
promise2 = d3Fetch.csv(url, parseRow);

return () => {
          json(data).then((d) => {
            console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      }

drawJsonModel(jsonName, alert, reverse, depth, layer, fitGrid) {
    const param = this.apiParamFrom(alert, reverse, depth, layer)
    json(this.apiURI('nested', jsonName, param))
      .then(
        graphData => {
          this.clearCanvas()
          this.makeGraphObjects(graphData)
          this.setOperationHandler(graphData)
          this.highlightByAlert(alert)
        },
        error => {
          throw error
        }
      )
      .then(() => fitGrid && this.fitGrid())
  }