Question

如何重构此代码，以便每个月以正确的天数绘制12个轴？因此，1月份的域名为1到31; 2月的域名为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

如何创建动态域？

1 个答案: