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

Question

我在项目中使用的是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);
        });

请指导我如何解决此问题。

Answer 1

我通过添加.attr("transform", "translate(40, " + height + ")")

解决了带有transform属性的问题

我的代码-

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

我不确定这是否是最佳解决方案，但这就是我解决的方法。