Modification des valeurs numériques pour le texte sur l'étiquette Y Axis pour dc.js ScatterPlot

Question

J'ai un nuage de points qui trace des événements uniques par date sur mon axe X et quand ils se produisent chaque jour, par le second, sur l'axe Y. Pour ce faire, j'ai pris les données de date que j'utilise pour l'axe X, et l'ai passée à travers une fonction qui produirait la seconde exacte du jour où l'événement s'est produit (0 à 86400). En ce sens, mon axe Y passe de 0 secondes à 86400 secondes. Cela m'a permis de représenter chacun d'eux, même de manière unique, sous la forme d'un point sur ma carte, jusqu'à la seconde.

Je suis assez satisfait du résultat de mon tableau:

Le seul problème est mon label Y va de 0 à 86400. Je voudrais changer le texte à un familier HH AM/format PM, peut-être quelque chose le long des lignes de « 0 à 23, où à savoir: si (y = valeur 3600) retour "

1 AM" Mon scatterplot ressemble à ceci:

scatterPlot 
     .width(window.innerWidth-100) 
     .height(window.innerHeight/2) 
     .x(d3.time.scale().domain([minDate, maxDate])) 
     .brushOn(false) 
     .mouseZoomable(true) 
     // .title(function (d) { 
     //  return "Event: " + d['text']; 
     // }) 
     .clipPadding(5) 
     .yAxisLabel("Hour of the day") 
     .elasticY(true) 
     .dimension(eventsByDateAndHourDim) 
     .group(eventsByDateAndHourGroup); 

J'ai essayé de faire ceci:

scatterPlot.yAxis().tickFormat(function (d) { 
    if (domain = 43200) 
     return "12 PM"; 
}) 

Mais cela change seulement toutes les étiquettes à "12 PM". Je ne sais pas comment faire référence à la valeur réelle de mon domaine Y.

J'ai essayé d'utiliser le groupe "if (eventsByDateAndHourGroup = 43200) ..." mais cela ne fonctionnait pas non plus.

Answer 1

Le paramètre de la fonction transmise au tickFormat() method est la coordonnée Y qui doit être formatée.

donc vous devriez être en mesure de faire quelque chose comme

scatterPlot.yAxis().tickFormat(function (d) { 
    var hour = Math.floor(d/3600), 
     pm = hour > 11; 
    if(pm) hour -= 12; 
    if(hour === 0) hour = 12; 
    return String(hour) + (pm ? ' PM' : ' AM'); 
}); 

Ou vous pouvez utiliser d3.time.format.utc pour une plus robuste, solution élégante:

var hourFormat = d3.time.format.utc('%I %p'); 
scatterPlot.yAxis().tickFormat(function (d) { 
    var date = new Date(d*1000); 
    return hourFormat(date); 
}); 

Ceci est un peu moins efficace, car Date objets sont lent, mais cela n'a probablement pas d'importance pour le traitement d'une douzaine de tiques.