时间戳

首页 > 解决方案 > D3-如何显示 xAxis 的刻度

javascript - D3-如何显示 xAxis 的刻度

问题描述

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

我要显示的变量是不同年份的季度，所以我将字符串数组 ["1947-01-01","1947-04-01",...] 转换为 js 日期对象数组 [Mon Apr 1957 年 1 月 1 日 00:00:00 GMT+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 位于画布的底线时，我不知道如何在 xAxis 下方显示刻度。

标签： javascriptd3.jssvg

解决方案

我认为问题可能出在您的秤和 .ticks() 方法的链接上。根据d3.axis 文档，.ticks()应该在您的轴上调用。尝试对您的xAxis.

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

.ticks()并在渲染 x 轴时移除，

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

推荐阅读