如何創建動態域？

Question

如何重構此代碼，以便每個月的12個座標軸的繪製時間都是正確的？因此，1月份的域名爲1到31;二月具有1至28等

const svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

const scale = d3.scaleLinear() 
    .domain([1, 31]) // The 31 days needs to be dynamic 
    .range([0, width - 32]); 

const axis = d3.axisBottom(scale) 
    .ticks(31); // The 31 ticks needs to be dynamic 

svg.selectAll("g") 
    .data([31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]) 
    .enter() 
    .append("g") 
    .attr("transform", (d, i) => { return "translate(16, " + i * 64 + ")"; }) 
    .call(axis); 

域這裏是一個Codepen。我正在使用d3.js的第4版。

Answer 1

您需要設置的規模和蜱各軸：

const svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

const axis = d3.axisBottom(); 

svg.selectAll("g") 
    .data([31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]) 
    .enter() 
    .append("g") 
    .attr("transform", (d, i) => { return "translate(16, " + i * 64 + ")"; }) 
    .each(function(d) { 
     var scale = d3.scaleLinear() 
       .domain([1, d]) 
       .range([0, width - 32]); 

     axis.scale(scale) 
       .ticks(d)(d3.select(this));}); 

更新CodePen