D3- ի և ART- ի React բնիկների հետ դոնաթների գծապատկեր ստեղծելը

Եթե ​​դուք կառուցում եք React Native ծրագիրը, որը յուրաքանչյուր օգտագործողի համար անհատականացված տվյալներ է ցուցադրում, գուցե ցանկանաք կառուցել տվյալների դինամիկ պատկերացում: D3- ը JavaScript- ի միջոցով դինամիկ պատկերացումներ ստեղծելու համար ամենատարածված և հզոր գրադարաններից է: Այն կարող է ինտեգրվել React Native- ի հետ ՝ օգտագործելով ART, գրադարան, որը մշակում և ցուցադրում է SVG, Scalable Vector Graphics:

Այս ձեռնարկում ես ցույց կտամ, թե ինչպես կարելի է կառուցել պարզ React Native բլիթների գծապատկեր ՝ օգտագործելով D3 և ART: Վերջնական արտադրանքը կստանա կամայական քանակությամբ տվյալներ և կարտադրի բլիթների գծապատկեր, որը նման է հետևյալին.

Կարգավորումը

Որպեսզի D3- ը React Native ART- ով օգտագործեք, նախ պետք է ձեր նախագիծը կապեք ART գրադարանի հետ: Արձագանքեք նավերով ART- ով, բայց չի ներառում դրա բոլոր կախվածությունները չափի նկատառումներից ելնելով:

Եթե ​​դուք արդեն չունեք, գլոբալ կերպով տեղադրեք React Native CLI:

npm install -g ռեակտիվ-բնիկ-կլի

Այնուհետև տեղադրեք ART և D3 և գործարկեք հրամանը ՝ ART- ը React Native- ի հետ կապելու միջոցով.

npm install art npm install d3
ռեակտիվ բնույթի հղում

Ձեր նախագծում ստեղծեք Donut.js անունով նոր ֆայլ և ներմուծեք հետևյալը.

ներմուծում React from 'React' import * as d3 from 'd3' import 'import ART} from' ռեակտիվ բնիկ 'const {Surface, Group, Shape} = ART

Ստեղծելով մակերես

Սկսելու համար մենք կկառուցենք մակերես: Այս ART բաղադրիչը կտա D3- ի կողմից ստեղծված SVG ուղու տվյալները:

Ի տարբերություն վեբ զննարկչի կողմից մատուցված D3- ի, React Native- ում D3- ը մուտք չունի DOM, և, հետևաբար, չի կարող տեսողական ներկայացումներ արտադրել `ներարկելով տարրերը այլ տարրերի մեջ: ART Surface բաղադրիչը կամուրջ է դարձնում այդ բացը `ստեղծելով տարածք, որպեսզի տրամադրվեն D3 SVG տվյալները:

const լայնությունը = 250 const բարձրությունը = 250
 // Դոնաթը, որը պետք է տեղադրվի այստեղ 

ԴՈՆԱԹ աղյուսակի տվյալները

Ես կօգտագործեմ հետևյալ տվյալները ՝ բլիթի աղյուսակը ստեղծելու համար; ազատ զգալ օգտագործել ցանկացած այլ տվյալ, այնքան ժամանակ, քանի դեռ այն զանգվածի մեջ է:

const userP գնումներ = [{ապրանքի անվանումը Անունը `'Mountain Dew', գինը` 3}, {ապրանքի անվանումը Անունը `'կոշիկ', գինը` 50, {ապրանքի անվանումը Անունը `'Kit Kat', գինը` 1}, {ապրանքի անվանումը 24}, {ապրանքի անվանումը Անուն ՝ «Watch», գինը ՝ 100, {տարր Անունը ՝ «Ականջակալներ», գինը ՝ 15, {item Անունը ՝ «Գինի», գինը ՝ 16}]

Ստեղծեք գծապատկերի անկյուններ և ուղի D3- ով

Որպեսզի բլիթ գծապատկերը պլանավորենք, մենք պետք է քարտեզագրենք մեր տվյալների բազայում գտնվող յուրաքանչյուր տարր `շրջագծի անկյունները տեղադրելու համար: Մենք կօգտագործենք d3.pie () մեթոդը ՝ բլիթների աղյուսակի յուրաքանչյուր կտորի համար անկյուններ ստանալու համար: Քանի որ ես ուզում եմ պլանավորել յուրաքանչյուր ապրանքի գինը վերը նշված օգտվողի տվյալների շտեմարանում, ես կասեմ D3- ին ՝ արժեքի մեթոդով փնտրելու գնի գույքը: Արժեքի մեթոդով դ պարամետրը ներկայացնում է օգտագործողների գնումների յուրաքանչյուր տարր.

constgmentAngles = d3.pie (). արժեք (d => d.price) (օգտվողի գնումներ)

Յուրաքանչյուր տարրերից ելքը պետք է նման լինի հետևյալին.

[... {տվյալներ. {ArticleName: 'Mountain Dew', գինը ՝ 3}, ցուցիչ ՝ 15, արժեքը ՝ 3, մեկնարկը ՝ 6.219718788925247, endAngle: 6.267318677616002, padAngle: 0} ...]

Բնօրինակ տվյալները դեռ առկա են, բայց տեղադրված է տվյալների սեփականության մեջ: Ավելացվեցին մի քանի նոր հատկություններ, որոնք պարունակում են անկյունային տեղեկատվություն:

Հաջորդը, մենք պետք է ստեղծենք SVG ուղի, որը մենք կարող ենք անցնել մեր Մակերևույթի բաղադրիչին: Մենք դա անելու ենք d3.arc () գործառույթի միջոցով, որը ստեղծում է SVG ուղի ՝ ելնելով գծապատկերի բարձրությունից և լայնությունից:

const path = d3.arc () .outerRadius (100) // պետք է պակաս լինի գծապատկերի բարձրությունից / լայնությունից 1/2-ից .padAngle (.05) // սահմանում է սպիտակ հատվածի քանակը բաժինների միջև: InnerRadius. (60) // ներքին «բլիթի» սպիտակ տարածքի չափը

Քարտեզ ստեղծելու համար տվյալների քարտեզագրում

Այժմ մենք ունենք անկյուններ մեր տվյալների յուրաքանչյուր տարրի համար և ուղու ֆունկցիա, որը կարող է այդ անկյունները գծագրել հատուկ շառավղով շրջանաձև ուղու վրա: Բլիթների աղյուսակը արտադրվելու է ուղու գործառույթով անկյունների քարտեզագրմամբ:

Նախքան դա անելը, մենք պետք է ստեղծենք Խմբի բաղադրիչ `աղյուսակի առանձին բաժինները միասին խմբավորելու համար.

 // sectionsուցադրել հատվածները այստեղ 

Ուշադրություն դարձրեք, որ Խմբի բաղադրիչի համար x և y ատրիբուտները մեր կողմից նախկինում սահմանված լայնությունն ու բարձրությունն են, որոնք բաժանված են երկուսի: Մենք պետք է նշենք այդ կոորդինատները, քանի որ d3.arc- ի միջոցով () միջոցով ստեղծված ուղիները կենտրոնացած են կոորդինատների վրա (0,0): Եթե ​​մեր բլիթների աղյուսակը կենտրոնացած լինի (0, 0), ապա դրա տեսանելի կլինի միայն քառորդը: Նշելով, որ Խմբի բաղադրիչի x և y կոորդինատները համապատասխանաբար պետք է լինեն լայնություն / 2 և բարձրություն / 2, մենք կենտրոնացնում ենք բլիթային աղյուսակը մեր Մակերևույթի բաղադրիչի կենտրոնում:

Այժմ մենք կարող ենք քարտեզագրել անկյան տվյալների հիման վրա ՝ բլիթների գծապատկեր տալու համար.

{բաժինAngles.map (բաժին => ( ))}

Գույները

Գույների հետ փորձի մի պարզ տարբերակ `գունային մասշտաբի ստեղծումն է, որը քարտեզագրում է օգտվողի յուրաքանչյուր տարրը: Գնվում են տվյալները 0-ից մինչև 255-ի միջև ընկած արժեքի համար.

const գույները = d3.scaleLinear () .domain ([0, props.userP գնումներ. երկարություն]). միջակայք ([0, 255])

ԴՈԹԱ աղյուսակի յուրաքանչյուր բաժնի լրացումը այնուհետև կարող է հաշվարկվել `իր ինդեքսը փոխանցելով գույների գործառույթին.

լրացնել = {`rgb ($ {50}, $ {գույներ (ինդեքս) / 1.5}, $ {գույներ (ինդեքս)})`}

Հաջորդ քայլերը

Այժմ դուք պետք է ունենաք հիմնական բլիթային աղյուսակ ձեր React Native հավելվածում: Եթե ​​դուք հետաքրքրված եք տվյալների պիտակներ ավելացնելով, խորհուրդ կտամ ստուգել d3 ցենտրոիդային մեթոդը:

Հուսով եմ, որ այս ձեռնարկը կօգնի ձեզ ինտեգրվել D3- ը ձեր React Native ծրագրի մեջ: