ダイナミックドメインを作成するにはどうすればよいですか？

Question

このコードをどのようにリファクタリングして、毎月12日の正しい日数で描画するのですか？その1月のドメインは1から31です。 2月には、ここ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); 

から1のドメインを持っている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));}); 

は `（d3.select（これは））`何をするんCodePen