旋转的 X 轴标签不显示

Question

我无法确保 D3 X 标签正确包含在整个 SVG 的高度中。

给定以下代码，X 标签旋转 45 度角，但 X 标签所在的区域，D3 仅显示标签的一半或 none。

nv.addGraph(function() {
    gChart = nv.models.discreteBarChart()
        .margin({ left: 65, right: 40 })
        .x(function(d) { return d.date })
        .y(function(d) { return d.total })
        .staggerLabels(false)
        .tooltips(true)
        .showValues(true);

    gChart.xAxis
        .tickFormat(function(d) { return d3.time.format('%b %d, %Y')(new Date(d)) });

    gChart.yAxis
        .axisLabel('G');

    d3.select('#g-chart svg')
        .datum(formattedG)
        .transition()
        .duration(350)
        .call(gChart);

    d3.selectAll("#g-chart .nv-x .nv-axis text")
        .attr("transform", function(d) {
            return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height*2 + ")rotate(-45)";
        });

    updateGchart(formattedG);

    return gChart;
});

有人可以帮忙吗？提前致谢。

Answer 1

你提到'D3 only shows half or none of the label'，text的位置超出svg canvas范围的可能性很大，尝试通过调整translate属性或使用其他属性如dx, dy(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy),或text-anchor调整文本位置。

旋转的 X 轴标签不显示

Rotated X Axis Labels Not Showing

javascript

d3.js

nvd3.js