Graphique en aires utilisant dc.js et crossfilter

Question

J'ai créé un graphique en courbes en utilisant dc.js et crossfilter. Le graphique ressemble actuellement à ceci :

Requis: Je veux que la légende d'actif inactif en haut à gauche soit positionnée en dessous (en bas) du graphique au centre et que l'étiquette des graduations de l'axe des x commence de Janvier à Décembre. Je rajoute mon code ci-dessous. Merci.

const dateNames = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
  "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];

var data = [
    {date: "2011-11-14T16:17:54Z", quantity: 2, actif: 1000, inactif: 100, type: "onglet", ville: " "},
    {date: "2011-11-14T16:20:19Z", quantity: 2, actif: 190, inactif: 100, type: "onglet", ville: "Berlin"},
    {date: "2011-11-14T16:28:54Z", quantity: 1, actif: 300, inactif: 200, type: "visa", ville: " "},
    {date: "2011-11-14T16:30:43Z", quantity: 2, actif: 90, inactif: 0, type: "onglet", ville: "Amsterdam"},
    {date: "2011-11-14T16:48:46Z", quantity: 2, actif: 90, inactif: 0, type: "onglet", ville: " "},
    {date: "2011-11-14T16:53:41Z", quantity: 2, actif: 90, inactif: 0, type: "onglet", ville: " "},
    {date: "2011-11-14T16:54:06Z", quantity: 1, actif: 100, inactif: 0, type: "espèces", ville: " "},
    {date: "2011-11-14T16:58:03Z", quantity: 2, actif: 90, inactif: 0, type: "onglet", ville: " "},
    {date: "2011-11-14T17:07:21Z", quantity: 2, actif: 90, inactif: 0, type: "onglet", ville: " "},
    {date: "2011-11-14T17:22:59Z", quantity: 2, actif: 90, inactif: 0, type: "onglet", ville: " "},
    {date: "2011-11-14T17:25:45Z", quantity: 2, actif: 200, inactif: 0, type: "espèces", ville: " "},
    {date: "2011-11-14T17:29:52Z", quantity: 1, actif: 200, inactif: 100, type: "visa", ville: ""}
  ];

  data.forEach(function(d){
    var tempDate = new Date(d.date);
    d.date = tempDate;

  })

  var facts = crossfilter(data);
  var all = facts.groupAll();

  //tableau
  var dateDimension = facts.dimension(function(d){ return d.date; });
  //graphique en courbes

  var dateGroup = dateDimension.group().reduceSum(function(d){ return d.actif; });
  var dateGroupTip = dateDimension.group().reduceSum(function(d){ return d.inactif; });

  var minDate = dateDimension.bottom(1)[0].date;
  var maxDate = dateDimension.top(1)[0].date;

  var lineChart = dc.lineChart("#test")
    .width(700)
    .height(200)
    .brushOn(false)
    .margins({top:10,bottom:30,right:10,left:70})
    .dimension(dateDimension)
    .group(dateGroupTip,"inactif")
    .stack(dateGroup,"actif")

    .renderHorizontalGridLines(true)
    .renderArea(true)
    .renderDataPoints(true)
    // // .interpolate('basis')
    // lineChart.xAxis().ticks(d3.timeMonth, 1)
    // lineChart.xAxis().tickFormat(d3.timeFormat('%b'))
    .clipPadding(data.length)
    .legend(dc.legend().y(10).x(0).itemHeight(12).gap(5))
    // .xAxis()
    // .ticks(d3.time.month, 7)
    // .tickFormat(d3.time.format('%e'));
    // .xAxis().tickFormat(d3.time. format('%B'))
    // .xUnits(d3.time.months)
    .x(d3.scaleLinear().domain([minDate,maxDate]))
    lineChart.yAxis().ticks(6);
    lineChart.xAxis().ticks(12);

dc.renderAll();

    Document

Answer 1

Il semble que vous ayez presque tout compris, et que vous ayez été dérouté par les changements d'API de la version 3 à la version 4 de D3 ?

Beaucoup des lignes que vous avez commentées étaient correctes, sauf pour ces changements - des éléments comme d3.time.months changent en d3.timeMonths. Vous n'êtes pas le seul - ces changements ont causé beaucoup de confusion pour nous tous.

Les dernières étapes sont

1. Utilisez des échelles de temps : .x(d3.scaleTime().domain([minDate,maxDate]))
2. Arrondissez les dates au début du mois en utilisant d3.timeMonth, à la fois dans la définition de la dimension et dans le calcul de minDate/maxDate, par exemple var dateDimension = facts.dimension(function(d){ return d3.timeMonth(d.date); });
3. Indiquez au graphique comment calculer le nombre de points à afficher : .xUnits(d3.timeMonths)
4. Formatez les graduations de l'axe x : lineChart.xAxis().tickFormat(d3.timeFormat('%B'))

Vous aviez la plupart de ces éléments, simplement en commentaire. Probablement parce que vous avez trouvé des exemples utilisant l'API D3v3, et qu'ils ont causé des erreurs ?

Quant à la légende, dc.js ne fait rien de sophistiqué ici - vous devez simplement la placer manuellement, en définissant les marges sur le graphique pour permettre assez d'espace, et en définissant x et y sur la légende pour la placer où vous le souhaitez.

J'ai trouvé que

lineChart
    .margins({top:10,bottom:60,right:25,left:40});
    .legend(dc.legend().y(165).x(325).itemHeight(12).gap(5))

fonctionnait très bien, mais vous devrez l'ajuster à votre goût (et malheureusement, lorsque les changements de vos données modifient les tailles des éléments).

Voici un exemple fonctionnel. J'ai pris la liberté de modifier vos données d'exemple pour inclure les mois souhaités.

Vous allez rencontrer des problèmes avec ce design si vos données s'étendent sur plusieurs années, mais je suppose que vous pourrez régler cela quand vous y arriverez.