web-dev-qa-db-fra.com

Comment fonctionne le d3.scaleBand?

Comment puis-je faire fonctionner la ligne var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); de cet exemple dans d3 v4 en utilisant d3.scaleBand ?

javascriptd3.jsbar-chart
14
Nafis

dans D3 4.x, ordinal . rangeRoundBands a été remplacé par band .rangeRound (il n'y a donc plus de rangeRoundBands). Par ailleurs...

La nouvelle bande . Padding, band . PaddingInner and band . Les méthodes paddingOuter remplacent les arguments facultatifs par ordinal.rangeBands.

Donc, 0.05 Va à paddingInner. Voici à quoi ressemble la ligne dans D3 v4.x:

d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05);

J'ai réécrit le code dans votre exemple, mis à jour vers D3 v4.x: https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

Les changements nécessaires:

  • var parseDate = d3.timeParse("%Y-%m");
  • var x = d3.scaleBand().rangeRound([0, width]).paddingInner(0.05);
  • var y = d3.scaleLinear().range([height, 0]);
  • var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m"));
  • var yAxis = d3.axisLeft(y).ticks(10);
  • pour les barres: .attr("width", x.bandwidth())
23
Gerardo Furtado