Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
132
rated 0 times [  135] [ 3]  / answers: 1 / hits: 26665  / 8 Years ago, sat, july 23, 2016, 12:00:00

How can I make the line var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); from this example work in d3 v4 using d3.scaleBand?


More From » d3.js

 Answers
75

in D3 4.x, ordinal.rangeRoundBands has been replaced with band.rangeRound (thus, there is no more rangeRoundBands). Besides that...




The new band.padding, band.paddingInner and band.paddingOuter methods replace the optional arguments to ordinal.rangeBands.




So, that 0.05 goes to paddingInner. This is how the line looks in D3 v4.x:



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


I have rewritten the code in your example, updated to D3 v4.x: https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview



Necessary changes:




  • 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);

  • for the bars: .attr(width, x.bandwidth())


[#61274] Thursday, July 21, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
janjadonb

Total Points: 4
Total Questions: 114
Total Answers: 118

Location: Mali
Member since Fri, Dec 3, 2021
3 Years ago
janjadonb questions
;