Question

如果将xAxis的刻度放置在svg画布的最底部，我找不到显示刻度的方法。

我想要显示的变量是不同年份的四分之一，所以我将字符串数组[“ 1947-01-01”，“ 1947-04-01”，...]转换为js日期对象数组[1957年1月1日星期一，格林尼治标准时间+0000（GMT + 01：00），1957年7月1日星期一，01：00：00 GMT + 0100（GMT + 01：00），...]

我建立了xAxis

const xScale=d3.scalePoint()
                    .domain(dates) // dates is a array of date objects
                    .range([0,w])

const xAxis=d3.axisBottom(xScale);

最后我设置了一个小组

svg.append("g")
            .attr("class","axis")
            .attr(`transform`,`translate(0,${h})`) // h is the height of the canvas
            .call(xAxis)
             .ticks(4) // It does not work  in this code

我尝试应用命令滴答声，但在此代码中不起作用。另一方面，当它位于画布的底行时，我不知道如何在xAxis下方显示刻度。

Answer 1

我认为问题可能出在您的秤和.ticks（）方法的链接上。根据{{3}}，应在您的轴上调用.ticks()。尝试对xAxis进行以下更改。

 const xAxis = d3.axisBottom(xScale).ticks(4);

渲染x轴时删除.ticks()

svg.append('g')
  .attr('class','axis')
  .attr('transform',`translate(0,${h})`) 
  .call(xAxis);

D3-如何显示xAxis的刻度

1 个答案: