如何创建动态域？

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