D3.scaleBand hoạt động như thế nào?

Question

Làm cách nào để tạo dòng var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); từ this example hoạt động trong d3 v4 bằng cách sử dụng d3.scaleBand?

Answer 1

trong D3 4.x, thứ .rangeRoundBands đã được thay thế bằng band .rangeRound (do đó, không có nhiều rangeRoundBands). Bên cạnh đó ...

mới band .padding, band .paddingInner và band phương pháp .paddingOuter thay thế các đối số tùy chọn để ordinal.rangeBands.

Vì vậy, điều đó 0.05 chuyển đến paddingInner. Đây là cách dòng trông trong D3 v4.x:

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

Tôi đã viết lại đoạn code trong ví dụ của bạn, cập nhật để D3 v4.x: https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

thay đổi cần thiết:

• 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);
• cho các thanh: .attr("width", x.bandwidth())