Wie funktioniert das d3.scaleBand?

Question

Wie kann ich die Linie var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); von this example arbeiten in d3 v4 mit d3.scaleBand?

Answer 1

in D3 4.x ordinal .rangeRoundBands wurde mit Band .rangeRound (Somit gibt es nicht mehr rangeRoundBands) ersetzt worden ist. Außerdem ...

Der neu Band .padding, Band .paddingInner und Band .paddingOuter Methoden ersetzen die optionalen Argumente ordinal.rangeBands.

So, das 0.05 geht an paddingInner. Dies ist, wie die Linie in D3 v4.x aussieht:

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

ich den Code in Ihrem Beispiel neu geschrieben haben, aktualisiert D3 v4.x: https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

Notwendige Änderungen:

• 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);
• für die Stäbe: .attr("width", x.bandwidth())