时间戳

首页 > 解决方案 > 在 d3 图表中，我的 xAxis 刻度文本未完全显示

javascript - 在 d3 图表中，我的 xAxis 刻度文本未完全显示

问题描述

我在我的项目中使用 d3 图表，在我的图表中，我正在formatToDateAndTime格式化我的xAxis刻度以显示特定格式的日期。

我看到的问题是我的 xAxis 刻度文本没有完全出现，它从开始就被切断了。

下图显示的第一个值应该oct 16 12:00 AM像这样''，但它只显示' 16 12:00 AM'在刻度。

这是我的代码 -

var xAxis = d3
            .axisBottom(xScale)
            .ticks(5);

        const formatToDateAndTime = d3.timeFormat("%b %d %I:%M %p"); // e.g.Sep 18 02:30 PM

        xAxis.tickFormat((d, index) => {
            return formatToDateAndTime(d);
        });

在此处输入图像描述

请指导我如何解决这个问题。

标签： javascriptd3.js

解决方案

我通过添加使用 transform 属性解决了这个问题.attr("transform", "translate(40, " + height + ")")

我的代码 -

g.append("g")
    .attr("class", "x axis")
    .attr("id", "axisX")
    .attr("transform", "translate(40, " + height + ")")
    .call(xAxis);

我不确定这是否是最好的解决方案，但这就是我解决这个问题的方法。

推荐阅读