D3-ке жұмсақ кіріспе: Қайталанатын көпіршікті диаграмманы қалай жасауға болады

D3-тен бастаңыз

Мен D3-ті үйрене бастаған кезде, маған ештеңе көрінбеді. Мен қайтадан пайдалануға болатын диаграммалармен айналыса бастаған кезде ғана нақты болды.

Бұл мақалада мен сізге D3-ге жұмсақ кіріспе бере отырып, көп рет қолданылатын көпіршікті диаграмманы қалай құруға болатындығын көрсетемін. Біз қолданатын мәліметтер жиынтығы 2017 жылдың қаңтарында freeCodeCamp-та жарияланған әңгімелерден тұрады.

Бұл сіз құратын диаграмма

D3 туралы

D3 - бұл деректерді визуализациялауға арналған JavaScript кітапханасы. Ол HTML, SVG және CSS көмегімен деректерді өмірге әкеледі.

Біз басқа жобадағы диаграмманы жиі пайдалануымыз керек немесе басқалармен бөлісуіміз керек. Бұл үшін Майк Босток (D3 құрушысы) қайта пайдалануға болатын диаграммалар моделін ұсынды. Пабло Наварро Кастильоның Mastering D3.js кітабында келтіргендері сияқты, біз оның көзқарасын бірнеше кішкене өзгертулермен қолданамыз.

Біз D3 4.6.0 нұсқасын қолданамыз.

EКүнделікті кестелер

Қайталанатын диаграмма үлгісіне сәйкес диаграммалар екі сипаттамадан тұрады:

  • Конфигурация. Диаграмманың сыртқы түрін және тәртібін кодтың өзін өзгертпей өзгерткіміз келеді.
  • Өз бетінше құру мүмкіндігі. Біз диаграмманың әрбір элементін өз деректер жинағымыздағы деректер нүктесіне дербес тағайындағанын қалаймыз. Бұл D3 деректер даналарын DOM элементтерімен байланыстыруымен байланысты. Бұл бір минуттан кейін анық болады.
«Қорытынды: Диаграммаларды жабу әдісі арқылы орындаңыз.» - Майк Босток

Көпіршікті диаграмма

Алдымен диаграмманың қандай элементтерін реттеуге болатынын анықтау керек:

  • Диаграмма мөлшері
  • Мәліметтер енгізу

Диаграмма өлшемін орнатыңыз

Диаграмманың барлық айнымалыларын қамтитын және әдепкі мәндерді орнататын функцияны құрудан бастайық. Бұл құрылым қорытынды деп аталады.

// bubble_graph.js
var bubbleChart = функция () {var ені = 600, биіктігі = 400; Функция жоспары (таңдау) {// сіз мұнда келесіз} қайтару кестесі; }

Сіз кодты өзгертпестен әртүрлі мөлшердегі диаграммаларды жасағыңыз келеді. Ол үшін диаграммаларды келесідей жасаңыз:

// bubble_graph.html
var диаграммасы = bubbleChart (). Ені (300). Биіктігі (200);

Мұны істеу үшін ені мен биіктігі үшін айнымалыларды анықтайсыз.

// bubble_graph.js
var bubbleChart = функция () {var ені = 600 биіктігі = 400;
Функция жоспары (таңдау) {// Біз мұнда келеміз} chart.width = функция (мән) {егер (! Arguments.length) {қайтару ені; } ені = мәні; Қайтару кестесі; }
chart.height = функциясы (мәні) {егер (! аргументтер.length) {қайтару биіктігі; } Биіктігі = мәні; Қайтару кестесі; } Қайтару кестесі; }

BubbleChart () (ені немесе биіктігі атрибуттары жоқ) деп атағанда, диаграмма сіз жабу кезінде анықтаған ені мен биіктігі үшін әдепкі мәндерімен жасалады. Егер әдіс дәлелсіз шақырылса, ол айнымалы мәнді қайтарады.

// bubble_graph.html
var диаграмма = bubbleChart (); көпіршікті диаграмма (). ені (); // 600-ді қайтарады

Сіз әдістердің диаграмма функциясын неліктен қайтаратынын білгіңіз келуі мүмкін. Бұл кодты жеңілдету үшін қолданылатын JavaScript үлгісі. Мұны әдіс тізбегі деп атайды. Осы үлгінің көмегімен сіз жаңа нысандарды келесідей жасай аласыз:

// bubble_graph.html
var диаграммасы = bubbleChart (). Ені (600). Биіктігі (400);

орнына:

// bubble_graph.html
var диаграмма = bubbleChart (); chart.setWidth (600); chart.setHeight (400);

Біздің диаграммамызға деректерді қосыңыз

Енді деректерді диаграмма элементтеріне қалай қосуға болатынын білейік. Диаграмма қалай құрылымдалған: Диаграмма бар div SVG элементіне ие және әрбір мәліметтер нүктесі диаграммадағы шеңберге сәйкес келеді.

// bubble_graph.html bubbleChart () функциясын шақырғаннан кейін
// деректерден алынған оқиға // деректерден басқа оқиға ...

🗄 d3.data ()

D3.selection.data ([data [, key]]) функциясы мәліметтерге сәтті байланған элементті ұсынатын жаңа таңдауды қайтарады. Мұны істеу үшін алдымен CSV файлынан деректерді жүктеу керек. Сіз d3.csv (url [[, row], callback]) функциясын қолданасыз.

// bubble_graph.html
d3.csv ('file.csv', функция (қате, біздің_қатынас) {var data = our_data; // мұнда сіз деректермен қалаған нәрсені жасай аласыз}
// орташа_жануар.csv | тақырып | Санат | Жүректер | | -------------------------------------- | ---------- ---- | -------- | | Бағдарламалық жасақтаманы әзірлеуді ешкім қолданғысы келмейді 2700 | | Жолдармен жоғалған веб-навигация Дизайн | 688 | | Деректер инженері туралы ақпараттың көтерілуі | 862 |

3 d3 таңдау

Біздің деректерді диаграммаға жіберу үшін сіз d3-select () және data () функцияларын қолданасыз.

Таңдау құжат нысаны моделінің (DOM) деректерге негізделген қуатты түрлендірілуіне мүмкіндік береді: атрибуттарды, стильдерді, қасиеттерді, HTML немесе мәтіндік мазмұнды және т.б. - D3 құжаттамасы
// bubble_graph.html
d3.csv ('орташа_january.csv', функция (қате, біздің_қатынас) {егер (қате) {console.error ('Мәліметтерді алу немесе талдау кезінде қате пайда болды.'); лақтыру қатесі;}
var диаграммасы = bubbleChart (). Ені (600). Биіктігі (400); d3.select ('# диаграмма'). деректер (our_data) .қоңырау (диаграмма);
});

Тағы бір маңызды селектор - d3.selectAll (). Сізде келесі құрылым бар делік:


    
    
    

d3.select («дене»). SelectAll («div») осы бөлгіштердің барлығын біз үшін таңдайды.

d3.enter ()

Енді сіз D3 функциясымен танысасыз: d3.enter (). Сізде бос дене тегі мен деректер жиынтығы бар делік. Сіз массивтің әрбір элементін аралап, әр элемент үшін жаңа бөлгіш жасағыңыз келеді. Мұны келесі кодпен жасауға болады:

 // бос 
---- // js сценарийі
var our_data = [1, 2, 3] var div = d3.select («дене») .selectAll («div») .data (our_data) .enter () .append («div»); ---


    
    
    

Бөлімдер әлі болмаған кезде сізге SelectAll («div») не қажет? Себебі D3-де біз бір нәрсені қалай жасау керектігін айтпастан, өзіміз қалайтын нәрсені айтамыз.

Бұл жағдайда сіз әрбір дивизионға массивтің элементін тағайындағыңыз келеді. Сіз мұны SelectAll («div») көмегімен айтасыз.

var div = d3.select («body») .selectAll («div») // мұнда сіз «эй d3, келесі массивтің барлық деректер элементі div '.data (our_data) .enter байланыстырылады (). қосу («div»);

Enter пернесі () таңдауды массивтің элементіне байланған деректермен қайтарады. Содан кейін бұл таңдауды .append («div») көмегімен DOM-ға қосыңыз.

3d3.forceSimulation ()

Шеңбердің физикасын модельдеу үшін сізге бір нәрсе керек. Ол үшін сіз d3.forceSimulation ([түйін]) қолданыңыз. Сондай-ақ, қандай күш түрін түйіндердің орналасуын немесе жылдамдығын өзгертетінін көрсету керек.

Біздің жағдайда біз d3.forceManyBody () қолданады.

// bubble_chart.js
var simulation = d3.forceSimulation (деректер) .force («зарядтау», d3.forceManyBody (). күш ([- 50])) .force («x», d3.forceX ()) .force («y», d3.forceY ()) .on («кене», белгіленген);

Күштің оң мәні түйіндердің бір-бірін тартады, ал теріс беріктік мәні оларды бір-біріне итермелейді.

Күш () эффект

Алайда, біз түйіндердің бүкіл SVG кеңістігін қамтығанын қаламаймыз, сондықтан d3.forceX (0) және d3.forceY (0) функцияларын қолданамыз. Бұл шеңберлерді 0 позициясына «сүйрейді». Мұны не болатынын көру үшін кодтан алып тастап көріңіз.

Бетті жаңарта отырып, шеңберлер түзелгенше көруге болады. Белгіленген () функциясы шеңберлердің орнын жаңартады. D3.forceManyBody () әр түйіннің х және у күйін үнемі жаңартады, ал белгіленген () функциясы DOM-ны осы мәндермен жаңартады (cx және cy төлсипаттары).

// bubble_graph.js
Функция тексерілген (e) {node.attr («cx», функция (d) {қайтару dx;}) .attr («cy», функция (d) {return dy;}); // 'түйін' - көпіршікті диаграммадағы кез-келген шеңбер
}

Мұнда бәрі бар код:

var simulation = d3.forceSimulation (деректер) .force («зарядтау», d3.forceManyBody (). күш ([- 50])) .force («x», d3.forceX ()) .force («y», d3.forceY ()) .on («кене», белгіленген);
Функция тексерілген (e) {node.attr («cx», функция (d) {қайтару dx;}) .attr («cy», функция (d) {return dy;}); }

Қорытындылай келе, бұл модельдеу әр шеңберге x пен y позициясын береді деп айтуға болады.

d3. таразылар

Міне, ең қызықты бөлік: шеңберлерді қосу. Enter () функциясы есіңізде ме? Сіз оны қазір қолданасыз. Біздің кестеде әр шеңбердің радиусы әр оқиғаға арналған ұсыныстар санына пропорционалды. Ол үшін сызықтық шкаланы қолданыңыз: d3.scaleLinear ()

Таразыны пайдалану үшін екі нәрсені анықтау керек:

  • Домен: енгізілетін деректердің минималды және максималды мәні (біздің жағдайда ұсынымдардың ең төменгі және максималды саны). Минималды және максималды мәндерді алу үшін d3.min () және d3.max () функцияларын қолданыңыз.
  • Ауқым: Масштабтың минималды және максималды шығыс мәні. Біздің жағдайда біз ең кіші радиусы 5 және ең үлкен радиусы 18 өлшемін қалаймыз.
// bubble_graph.js
var rangeRadius = d3.scaleLinear () .domain ([d3.min (мәліметтер, функция (d) {return + d.views;})), d3.max (деректер, функция (d) {return + d.views; })]) .жазба ([5,18]);

Әрі қарай шеңбер құрыңыз:

// bubble_graph.js
var node = svg.selectAll («Kreis») .data (деректерді енгізу) () .append («шеңбер») .attr ('r', функция (d) {miqyosRadius (d.views) return})}) ;

Шеңберді бояу үшін категориялық шкаланы қолданыңыз: d3.scaleOrdinal (). Бұл шкала дискретті мәндерді қайтарады.

Біздің деректер жиынтығымызда 3 санат бар: дизайн, әзірлеу және деректер туралы ғылым. Сіз осы санаттардың әрқайсысын түске бөлесіз. d3.schemeCategory10 бізге 10 түстің тізімін береді, ол бізге жеткілікті.

// bubble_graph.js
var colorCircles = d3.scaleOrdinal (d3.schemeCategory10); var node = svg.selectAll («Kreis») .data (деректерді енгізу) () .append («шеңбер») .attr ('r', функция (d) {return scRadius (d.views)}) .style («толтыру», функция (d) {return colorCircles (d.category)});

Егер сіз шеңберлерді SVG файлының ортасында сызғыңыз келсе, әр шеңберді ортаға (ені мен биіктігінің жартысы) жылжытыңыз. Мұны не болатынын көру үшін кодтан алып тастаңыз.

// bubble_graph.js
var node = svg.selectAll («Kreis») .data (деректерді енгізу) () .append («шеңбер») .attr ('r', функция (d) {return scRadius (d.views)}) .style («толтыру», қайтару функциясы (d) {colorCircles (d.category)}) .attr ('айналдыру', 'аудару (' + [ені / 2, биіктігі / 2] + ')');

Енді диаграммаға кеңестер қосыңыз. Біз тінтуірді шеңберлер бойынша жылжытқан кезде оларды көрсету керек.

var tooltip = таңдау .append («бөлу») .style («позиция», «абсолютті») .style («көріну», «жасырын») .style («color», «white») .style («толтыру» , «8px») .style («фон түсі», «# 626D71») .style («жақтау радиусы», «6px») .style («мәтінді туралау», «center») .style («шрифттер отбасы», «monospace» ) .style («ен», «400px») .Мәтін («»);
var node = svg.selectAll («Kreis») .data (деректерді енгізу) () .append («шеңбер») .attr ('r', функция (d) {return scRadius (d.views)}) .style («толтыру», қайтару функциясы (d) {colorCircles (d.category)}) .attr ('түрлендіру', 'аудару (' + [ені / 2, биіктігі / 2] + ')') .on («тінтуірге ауысу» «, Функция (d) {tooltip.html (d.category +» «+ d.title +» «+ d.views); return tooltip.style (» көріну «,» көрінетін «);}) .on (» мусов «, функциясы () {return tooltip.style (» top «, (d3.event.pageY-) 10) + «px»). Стиль («солға», (d3.event.pageX + 10) + «px»);}) .on («тышқан», функциясы () {return tooltip.style («көріну») , «жасырын»);});

Тінтуір меңзері тінтуір жылжытқан кезде жүреді. d3.event.pageX және d3.event.pageY тінтуірдің координаталарын қайтарады.

Бұл да сол! Қорытынды кодты мына жерден көруге болады.

Сіз мұнда көпіршік үстелімен ойнауға болады.

Сіз бұл мақаланы пайдалы деп таптыңыз ба? Мен ай сайын терең сүңгуір мақала жазуға тырысамын. Мен жаңа хабарлама жіберген кезде электрондық поштаны аласыз.

Сұрақтар немесе ұсыныстар? Оларды түсініктемелерде қалдырыңыз. Оқығаныңызға рахмет!

Джон Кармайкл мен Александра Циснейростарға ерекше рахмет.