D3.js 如何创建动态域？

我如何重构这段代码，使12个轴以每月正确的天数绘制？所以一月有一个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);

---

这是一本书。我使用的是d3.js的第4版。

您需要为每个轴设置刻度和刻度：

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

---

更新了

您需要为每个轴设置刻度和刻度：

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.选择（此））

做什么？轴生成器

轴（上下文）

需要选择<代码>d3.选择（此）使用当前的

元素创建一个选择。

（d3.选择（此））

做什么？轴生成器

轴（上下文）

需要选择<代码>d3。选择（此）使用当前的

元素创建一个选择。