如何在NVD3图表的坐标轴标签中使用上标格式？

方法一：使用Unicode上标字符（最简单方案） #

NVD3的坐标轴标签支持直接渲染Unicode字符，你可以直接替换axisLabel的值为包含上标字符³的文本，无需额外DOM操作：

修改Y轴配置部分：

yAxis: {
    axisLabel: 'Molecular density (kg/m³)', // 直接使用Unicode上标字符³
    tickFormat: function(d){
        return d3.format('.02f')(d);
    },
    axisLabelDistance: -10,
    showMaxMin: false
}

这种方式兼容性好，实现成本低，完全满足你的基础上标需求。

方法二：通过回调修改DOM实现HTML格式（适配复杂样式） #

如果需要更复杂的文本格式（比如多段上标、下标或自定义样式），可以利用Angular-nvd3的callback配置，在图表渲染完成后手动替换Y轴标签的HTML内容：

1. 在chart配置中添加渲染回调：

chart: {
    type: 'lineChart',
    height: 450,
    // ... 其他原有配置 ...
    callback: function(chart) {
        // 定位Y轴标签元素
        var yAxisLabel = d3.select('.nv-y.nv-axis > g.nv-axislabel');
        // 替换为带HTML上标的内容
        yAxisLabel.html('Molecular density (kg/m<sup>3</sup>)');
    }
}

2. 完整的$scope.options示例：

$scope.options = {
    chart: {
        type: 'lineChart',
        height: 450,
        margin : {
            top: 20,
            right: 20,
            bottom: 80,
            left: 55
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        useInteractiveGuideline: true,
        callback: function(chart) {
            var yAxisLabel = d3.select('.nv-y.nv-axis > g.nv-axislabel');
            yAxisLabel.html('Molecular density (kg/m<sup>3</sup>)');
        },
        xAxis: {
            axisLabel: 'Timeline',
            tickFormat: function(d) {
                return d3.time.format('%B %d')(new Date(d))
            },
            ticks: 6,
            showMaxMin: false
        },
        yAxis: {
            axisLabel: '', // 先清空原标签，避免过渡显示
            tickFormat: function(d){
                return d3.format('.02f')(d);
            },
            axisLabelDistance: -10,
            showMaxMin: false
        }
    }
};

这个方法通过D3选择器定位标签元素，用html()方法插入HTML代码，适配各种复杂文本格式需求。

内容的提问来源于stack exchange，提问作者Vada Poche