Question

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

鉴于以下代码，X标签以45度角旋转，但X标签所在的区域，D3仅显示标签的一半或没有。

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”只显示标签的一半或没有标签，text的位置超出svg画布范围的可能性很高，尝试调整通过调整translate属性或使用其他属性（例如dx，dy（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy）或text-anchor来调整文本位置。

旋转的X轴标签未显示

1 个答案: