Réamhrá milis ar D3: Conas cairt mboilgeog in-athúsáidte a dhéanamh

Tosaigh le D3

Nuair a thosaigh mé ag foghlaim D3, ní dhearna aon rud ciall dom. Níor tháinig rudaí níos soiléire ach nuair a thosaigh mé ag déileáil le léaráidí in-athúsáidte.

San Airteagal seo, taispeánfaidh mé duit conas cairt mboilgeog in-athúsáidte a chruthú agus réamhrá milis a thabhairt duit ar D3. Is éard atá sa tacar sonraí a úsáidimid scéalta a foilsíodh sa FreeCodeCamp i mí Eanáir 2017.

Maidir le D3

Is leabharlann JavaScript é D3 le haghaidh léirshamhlú sonraí. Tugann sé sonraí beo trí úsáid a bhaint as HTML, SVG agus CSS.

Is minic go gcaithfimid cairt a athúsáid i dtionscadal eile nó an chairt a roinnt le daoine eile. Chuige seo, mhol Mike Bostock (cruthaitheoir D3) samhail ar a dtugtar léaráidí in-athúsáidte. Úsáidfimid a chur chuige le roinnt mionathruithe, mar iad siúd a chuir Pablo Navarro Castillo i láthair sa leabhar Mastering D3.js.

Táimid ag úsáid D3 leagan 4.6.0 anseo.

Chart Cairteacha inúsáidte

Tá dhá thréith ag cairteacha a leanann patrún na cairte in-athúsáidte:

• Inchumraitheacht. Ba mhaith linn cuma agus iompar na léaráide a athrú gan an cód féin a athrú.
• Cumas a thógáil go neamhspleách. Táimid ag iarraidh go sannfar gach gné cairte go neamhspleách ar phointe sonraí inár tacar sonraí. Tá baint aige seo leis an gcaoi a nascann D3 cásanna sonraí le heilimintí DOM. Beidh sé seo níos soiléire i nóiméid.

"Conclúid: Cuir léaráidí i bhfeidhm mar dhúnadh le modhanna socraitheora." - Mike Bostock

An chairt mboilgeog

Ní mór duit a shainiú ar dtús cé na gnéithe den léaráid is féidir a choigeartú:

• Méid na cairte
• An tacar sonraí ionchuir

Socraigh méid na léaráide

Tosaímid trí fheidhm a chruthú a chuimsíonn athróga uile na cairte agus a leagann síos na luachanna réamhshocraithe. Tugtar an chonclúid ar an struchtúr seo.

// bubble_graph.js

var bubbleChart = feidhm () {var width = 600, airde = 400; Plean feidhme (roghnú) {// tiocfaidh tú anseo} tábla ar ais; }

Ba mhaith leat léaráidí de mhéideanna éagsúla a chruthú gan an cód a athrú. Chun seo a dhéanamh, cruthaigh léaráidí mar seo a leanas:

// bubble_graph.html

var diagram = bubbleChart (). Leithead (300). Airde (200);

Chun seo a dhéanamh, sainmhíníonn tú anois rochtana ar leithead agus airde na n-athróg.

// bubble_graph.js

var bubbleChart = feidhm () {var width = 600 airde = 400;

Plean feidhme (roghnú) {// Tagann muid anseo} chart.width = feidhm (luach) {más rud é (! Argóintí.length) {leithead fillte; } leithead = luach; Tábla ar ais; }

chart.height = feidhm (luach) {más rud é (! argóintí.length) {airde fillte; } Airde = luach; Tábla ar ais; } Tábla ar ais; }

Nuair a ghlaonn tú bubbleChart () (gan aon tréithe leithead nó airde), cruthaítear an chairt leis na luachanna réamhshocraithe maidir le leithead agus airde a shainigh tú laistigh den dúnadh. Má ghlaotar an modh gan argóintí, filleann sé an luach athraitheach.

// bubble_graph.html

cairt var = bubbleChart (); mboilgeogChart (). leithead (); // tuairisceáin 600

D’fhéadfá a bheith ag fiafraí cén fáth a dtugann na modhanna feidhm na cairte ar ais. Seo patrún JavaScript a úsáidtear chun an cód a shimpliú. Tugtar slabhrú modhanna air. Leis an bpatrún seo, is féidir leat rudaí nua a chruthú mar seo a leanas:

// bubble_graph.html

var diagram = bubbleChart (). Leithead (600). Airde (400);

in ionad:

// bubble_graph.html

cairt var = bubbleChart (); cairt.setWidth (600); cairt.setHeight (400);

Ceangail sonraí lenár léaráid

Anois, déanaimis foghlaim conas sonraí a nascadh le heilimintí cairte. Seo mar a dhéantar struchtúr ar an léaráid: Tá eilimint SVG ag an div leis an léaráid agus freagraíonn gach pointe sonraí do chiorcal sa léaráid.

// bubble_graph.html tar éis duit an fheidhm bubbleChart () a ghlaoch

// scéal ó shonraí // scéal eile ó shonraí ...

🗄 d3.data ()

Tugann an fheidhm d3.selection.data ([sonraí [, eochair]]) rogha nua ar ais a léiríonn gné a bhí ceangailte go rathúil le sonraí. Chun seo a dhéanamh, ní mór duit na sonraí ón gcomhad CSV a luchtú ar dtús. Úsáidfidh tú an fheidhm d3.csv (url [[, row], callback]).

// bubble_graph.html

d3.csv ('file.csv', feidhm (earráid, our_data) {var data = our_data; // anseo is féidir leat gach rud a theastaíonn uait a dhéanamh leis na sonraí}

// medium_january.csv | teideal | Catagóir | Croí | | -------------------------------------- | ---------- ---- | -------- | | Níl aon duine ag iarraidh Forbairt Bogearraí a Úsáid 2700 | | Loingseoireacht gréasáin gan chailliúint le cosáin Dearadh | 688 | | Ardú Eolaíocht Sonraí an Innealtóra Sonraí | 862 |

🖍 d3 roghnú

Úsáidfidh tú na feidhmeanna d3-select () agus sonraí () chun ár sonraí a chur ar aghaidh chuig an léaráid.

Cumasaíonn roghnú claochlú cumhachtach, sonraí-tiomáinte ar an tSamhail Réada Doiciméid (DOM): tréithe, stíleanna, airíonna, HTML nó ábhar téacs agus níos mó a shocrú. - Doiciméadú D3

// bubble_graph.html

d3.csv ('medium_january.csv', feidhm (earráid, our_data) {más rud é (earráid) {console.error ('Earráid ag fáil nó ag parsáil na sonraí.'); caith earráid;}

var diagram = bubbleChart (). Leithead (600). Airde (400); d3.select ('# cairt'). sonraí (our_data) .call (cairt);

});

Roghnóir tábhachtach eile is ea d3.selectAll (). Má tá an struchtúr seo a leanas agat:

d3.select ("comhlacht"). roghnaíonn SelectAll ("div") na divs seo go léir dúinn.

d3.enter ()

Anois cuireann tú aithne ar fheidhm thábhachtach D3: d3.enter (). Cuir i gcás go bhfuil clib choirp folamh agus sraith sonraí agat. Ba mhaith leat dul trí gach gné den eagar agus div nua a chruthú do gach eilimint. Is féidir leat é seo a dhéanamh leis an gcód seo a leanas:

 // folamh 

---- // js script

var our_data = [1, 2, 3] var div = d3.select ("comhlacht") .selectAll ("div") .data (our_data) .enter () .append ("div"); ---

Cén fáth a bhfuil SelectAll ("div") de dhíth ort nuair nach bhfuil na divs ann fós? Mar gheall i D3 deirimid an rud atá uainn seachas a rá conas rud a dhéanamh.

Sa chás seo ba mhaith leat gné den eagar a shannadh do gach div. Deir tú é sin le selectAll ("div").

var div = d3.select ("comhlacht") .selectAll ("div") // anseo deir tú 'hug d3, tá gach eilimint sonraí den eagar a thagann ina dhiaidh sin ceangailte le div' .data (our_data). (). aguisín ("div");

Seolann an eochair Iontráil () an roghnú leis na sonraí atá ceangailte leis an eilimint den eagar. Ansin cuir an rogha seo leis an DOM ag úsáid an .append ("div").

d3.forceSimulation ()

Teastaíonn rud éigin uait chun fisic na gciorcal a insamhail. Chuige seo úsáideann tú d3.forceSimulation ([nód]). Ní mór duit a shonrú freisin cén cineál fórsa a athraíonn suíomh nó luas na snaidhmeanna.

Is é ár gcás úsáidimid d3.forceManyBody ().

// bubble_chart.js

insamhalta var = d3.forceSimulation (data) .force ("charge", d3.forceManyBody (). neart ([- 50])) .force ("x", d3.forceX ()) .force ("y", d3.forceY ()) .on ("tic", tic);

Cuireann luach neart dearfach leis na nóid a chéile a mhealladh, agus bíonn luach neart diúltach ina gcúis leo a chéile a athchur.

Mar sin féin, nílimid ag iarraidh go rithfidh na nóid an spás SVG iomlán, mar sin úsáidimid d3.forceX (0) agus d3.forceY (0). Tarraingíonn sé seo na ciorcail go dtí an suíomh 0. Déan iarracht é seo a bhaint den chód chun a fháil amach cad a tharlóidh.

Nuair a dhéanann tú an leathanach a athnuachan, is féidir leat na ciorcail a choigeartú go dtí go gcobhsaíonn siad sa deireadh. Nuashonraíonn an fheidhm tic () suíomhanna na gciorcal. Déanann D3.forceManyBody () suíomh x agus y gach nód a nuashonrú i gcónaí, agus déanann an fheidhm tic () an DOM a nuashonrú leis na luachanna seo (na tréithe cx agus cy).

// bubble_graph.js

Seiceáil na feidhme (e) {node.attr ("cx", feidhm (d) {filleadh dx;}) .attr ("cy", feidhm (d) {filleadh dy;}); // is é 'nód' aon chiorcal ar an gcairt mboilgeog

}

Seo an cód le gach rud:

insamhalta var = d3.forceSimulation (data) .force ("charge", d3.forceManyBody (). neart ([- 50])) .force ("x", d3.forceX ()) .force ("y", d3.forceY ()) .on ("tic", tic);

Seiceáil na feidhme (e) {node.attr ("cx", feidhm (d) {filleadh dx;}) .attr ("cy", feidhm (d) {filleadh dy;}); }

Go hachomair, is féidir a rá go dtugann an t-ionsamhladh seo suíomh x agus y do gach ciorcal.

d3.scales

Seo an chuid is spreagúla: na ciorcail a chur leis. An cuimhin leat an fheidhm Iontráil ()? Úsáidfidh tú anois é. Inár dtábla, tá ga gach ciorcail comhréireach le líon na moltaí do gach scéal. Chun seo a dhéanamh, bain úsáid as scála líneach: d3.scaleLinear ()

Chun scálaí a úsáid, ní mór duit dhá rud a shainiú:

• Fearann: íosluachanna agus uasluachanna na sonraí ionchuir (inár gcás an líon íosta agus uasta moltaí). Chun na luachanna íosta agus uasta a fháil, bain úsáid as na feidhmeanna d3.min () agus d3.max ().
• Raon: Íosluach agus uasluach aschuir an scála. Is é ár gcás, ba mhaith linn an ga is lú de mhéid 5 agus an ga is mó de mhéid 18.

// bubble_graph.js

var scaleRadius = d3.scaleLinear () .domain ([d3.min (sonraí, feidhm (d) {filleadh + d.views;})), d3.max (sonraí, feidhm (d) {tuairisceán + d.views; })]) .range ([5,18]);

Agus ansin cruthaigh na ciorcail sa deireadh:

// bubble_graph.js

var nód = svg.selectAll ("Kreis") .data (cuir isteach sonraí) () .append ("ciorcal") .attr ('r', feidhm (d) {scaleRadius (d.views) tuairisceán})}) ;

Chun na ciorcail a dhathú, bain úsáid as scála catagóiriúil: d3.scaleOrdinal (). Filleann an scála seo luachanna scoite.

Tá 3 chatagóir inár tacar sonraí: dearadh, forbairt agus eolaíocht sonraí. Sannann tú dath do gach ceann de na catagóirí seo. Tugann d3.schemeCategory10 liosta dúinn le 10 dathanna, ar leor é dúinn.

// bubble_graph.js

var colorCircles = d3.scaleOrdinal (d3.schemeCategory10); var nód = svg.selectAll ("Kreis") .data (cuir isteach sonraí) () .append ("ciorcal") .attr ('r', feidhm (d) {return scaleRadius (d.views)}) .style ("fill", feidhm (d) {return colorCircles (d.category)});

Más mian leat na ciorcail a tharraingt i lár an chomhaid SVG, bog gach ciorcal go dtí an lár (leath an leithead agus leath an airde). Bain é seo den chód chun a fháil amach cad a tharlóidh.

// bubble_graph.js

var nód = svg.selectAll ("Kreis") .data (cuir isteach sonraí) () .append ("ciorcal") .attr ('r', feidhm (d) {return scaleRadius (d.views)}) .style ("líonadh", feidhm ar ais (d) {colorCircles (d.category)}) .attr ('translate', 'translate (' + [width / 2, airde / 2] + ')');

Anois cuir leideanna uirlisí leis an léaráid. Caithfear iad a thaispeáint gach uair a bhogann muid an luch thar na ciorcail.

var tooltip = roghnú .append ("div") .style ("position", "absolute") .style ("infheictheacht", "i bhfolach") .style ("dath", "bán") .style ("stuáil" , "8px") .style ("dath cúlra", "# 626D71") .style ("ga fráma", "6px"). Stíl ("téacs ailínithe", "lár") .style ("teaghlach cló", "monospace" ) .style ("leithead", "400px") .Text ("");

var nód = svg.selectAll ("Kreis") .data (cuir isteach sonraí) () .append ("ciorcal") .attr ('r', feidhm (d) {return scaleRadius (d.views)}) .style ("fill", feidhm ar ais (d) {colorCircles (d.category)}) .attr ('translate', 'translate (' + [width / 2, airde / 2] + ')') .on ("luchóg ", Feidhm (d) {tooltip.html (d.category +" "+ d.title +" "+ d.views); filleadh tooltip.style (" infheictheacht "," infheicthe ");}) .on (" mousemove ", feidhm () {filleadh tooltip.style (" barr ", (d3.event.pageY- 10) + "px"). Stíl ("ar chlé", (d3.event.pageX + 10) + "px");}) .on ("luchóg", feidhm () {filleadh tooltip.style ("infheictheacht" , "i bhfolach");});

Leanann pointeoir na luiche an cúrsóir nuair a ghluaiseann an luch. d3.event.pageX agus d3.event.pageY comhordanáidí na luiche ar ais.

Agus sin é! Is féidir leat an cód deiridh a fheiceáil anseo.

Is féidir leat imirt leis an tábla mboilgeog anseo.

An raibh an t-alt seo cabhrach duit? Déanaim mo dhícheall alt domhain tumadóireachta a scríobh gach mí. Féadfaidh tú ríomhphost a fháil nuair a phostálfaidh mé ceann nua.

Ceisteanna nó moltaí? Fág iad sna tráchtanna. Go raibh maith agat as léamh!

Buíochas speisialta le John Carmichael agus Alexandre Cisneiros.