D3 4.0 rangeRoundBands équivalent ?

Question

Je vois beaucoup de code D3 qui a quelque chose comme ça :

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

A partir de la version 4.0 de D3 d3.scale.ordinal() est maintenant d3.scaleOrdinal et rangeRoundBands semble avoir disparu.

> d3.scaleOrdinal()

{ 
  [Function: scale]
  domain: [Function],
  range: [Function],
  unknown: [Function],
  copy: [Function] 
}

Quel serait l'équivalent D3 v4 de ce code (tiré de l'ouvrage de Mike Bostock intitulé exemple de graphique en barres ) être ?

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

Answer 1

Dans D3 4.x rangeRoundBands a été déplacé vers le nouveau Bande échelle :

d3.scaleBand()
    .range([range])
    .round([round]);

C'est l'équivalent de :

d3.scaleBand()
    .rangeRound([range]);

Voici l'API : https://github.com/d3/d3-scale#band-scales

Answer 2

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

Ce qui précède calcule les bandes et définit le rembourrage entre les bandes. Dans la v4, l'équivalent est

var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1);

Answer 3

var svg = d3.select("svg"),

margin = {top: 20, right: 20, bottom: 30, left: 60},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.txt", function(d) {
  d.y = +d.y;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.x; }));
  y.domain([0, d3.max(data, function(d) { return d.y; })]);

Une syntaxe lançable pour un graphique classique utilisant à la fois scaleBand et scaleLinear.