AMcoder - javascript, python, java, html, php, sql

D3, Typescript - «this» տեսակի արգումենտը չի կարող վերագրվել «BaseType» տեսակի պարամետրին

Ես այստեղ ունեմ stackbiltz - https://stackblitz.com/edit/lable-line-break-vaszab?file=src/app/app.component.ts

Ես ունեմ d3 գծապատկեր և Angular հավելվածում:

X առանցքի պիտակները բաժանվում են երկու տողի վրա՝ օգտագործելով մի ֆունկցիա, որը կոչվում է, քանի որ ստեղծվում են z առանցքի տիզերը

private insertLinebreak(d) {

    let labels = d3.select(this);
    let words = d;
    console.log("Label:", labels.html());
    labels.text('');

    let index = words.indexOf(' ', words.indexOf(' ') + 1)
    let title = words.substr(0, index)
    let subtitle = words.substr(index + 1)

    let tspantitle = labels.append('tspan').text(title)
    let tspansubtitle = labels.append('tspan').text(subtitle)
    tspantitle
      .attr('x', 0)
      .attr('dy', '15')
      .attr('class', 'x-axis-title');
    tspansubtitle
      .attr('x', 0)
      .attr('dy', '16')
      .attr('class', 'x-axis-subtitle');

  };

Ֆունկցիան օգտագործում է «սա»՝ ֆունկցիան կանչող «g» ընտրելու համար (բայց d3-ում, կարծում եմ, այն ընտրում է ամբողջ svg-ը)

Այս կոդը աշխատում է stackblitz-ում, բայց իմ իրական կոդում ես սխալ եմ ստանում

Argument of type 'this' is not assignable to parameter of type 'BaseType'.

Ես գիտեմ, որ սա այնքան էլ օգտակար չէ

Կարծում եմ, սա կապ ունի Typescript-ի և այն կերպ, թե ինչպես է այն վարվում «սա»

Որևէ մեկը գիտի՞, թե ինչու է դա տեղի ունենում և ինչպես կարող եմ դա շտկել:

19.12.2018

  • Սա հնչում է որպես type սխալ՝ կապված TypeScript-ի հետ, և D3-ը TypeScript գրադարան չէ: Դուք կարող եք տեղադրել տիպի աջակցություն՝ ավելացնելով npm install @types/d3 --save ձեր նախագծին: BaseType-ը D3 տեսակների մի մասն է, և դուք կարող եք դիտել նշված փաթեթի .d.ts ֆայլերը՝ տեսնելու, թե որն է d3.select-ի մուտքագրված ստորագրությունը: Դուք պետք է փոխանցեք this-ն այդ տեսակին, բայց դա չի նշանակում, որ ձեր կոդը ֆունկցիոնալ է: Սա պարզապես TypeScript-ի մուտքագրման սխալ է: 19.12.2018
  • Այո, ես կարծում էի, որ դա կապված է Typescript-ի հետ: Հավելվածում տեղադրված եմ d3 տեսակներ: Փաստացի հավելվածն աշխատում է, բայց այս սխալը նշանակում է, որ ես չեմ կարող այն մղել արտադրության: 19.12.2018

Պատասխանները:


1

Կոմպիլյատորը ենթադրում է this-ի տեսակը ձեր insertLinebreak() ֆունկցիայի ներսում՝ որպես ձեր StackedChartCompoent դաս: Դիտելով definition="definitelyTyped/blob/444ae0e62284ed7f070c0bf563a2a9ca7fe5e2e5/types/d3-selection > d3.select(node)-ի համար, այնուամենայնիվ, դուք կարող եք տեսնել, որ այն ակնկալում է, որ հանգույցը երկարաձգի BaseType, որը սահմանված է որպես

export type BaseType = Element | EnterElement | Document | Window | null;

Քանի որ ձեր դասը ակնհայտորեն չի երկարացնում այս BaseTypeը, դուք սխալ եք ստացել:

Սա հիմնականում երկու ճանապարհ կա.

  1. Եթե ​​Ձեզ անհրաժեշտ է insertLinebreak() մեթոդը միայն մեկ վայրում, այն է՝ որպես հետ կանչ դեպի .each(), կարող եք այն դարձնել ֆունկցիայի արտահայտություն, որն այնուհետև ուղղակիորեն որպես փաստարկ փոխանցվում է .each()ին:

    .each(function() {
      let labels = d3.select(this);   // works
      // ...the original method's body
    })
    

    Սա աշխատում է, քանի որ կոմպիլյատորն այժմ գիտի այս ֆունկցիայի միակ մուտքի կետը և կարող է եզրակացնել thisի տեսակը, քանի որ .each() օգտագործում է Function.prototype.call() this հանգույցին կապելու համար:

    Սակայն նկատի ունեցեք, որ դուք պետք է օգտագործեք դասական ֆունկցիայի արտահայտությունը հօգուտ ES6 սլաքի ֆունկցիայի, քանի որ դա կունենա this նորից մատնանշում է իր բառապաշարը, ոչ թե դեպի հանգույց:

  2. Բարեբախտաբար, TypeScript-ի մեջ ներկառուցված ավելի բառակապակցություն կա: Քանի որ տարբերակ 2.0 կարող եք տրամադրել կեղծ this պարամետր: որպես ձեր ֆունկցիայի պարամետրերի ցանկի առաջին տարր: Այս պարամետրը կոմպիլյատորին ասում է, թե ինչ է this-ը վերաբերում նշված ֆունկցիայի ներսում: Այսպիսով, ձեր կոդը կարող է վերաշարադրվել հետևյալ կերպ.

    private insertLinebreak(this: SVGTextElement) {
      let labels = d3.select(this);   // works
      // method body left untouched
    }
    
19.12.2018

2

Եթե ​​դեռ ինչ-որ մեկը չի կարողանում լուծում գտնել, փորձեք սա !!!

private insertLinebreak(d,i,n){
  //d is your data
  //i is the current index
  //n is the current node
  let labels = d3.select(this); // won't work
  let labels = d3.select(n[i]); // works
 }

Ուրախ կոդավորում !!!!

25.09.2020
Նոր նյութեր

Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..

Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...

Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..

Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..

Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..

C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...

Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..