D3的axis component没有内置轴标签，但是你可以通过添加一个SVG text元素来自己添加标签。一个很好的例子是我对Gapminder的动画气泡图The Wealth & Health of Nations的重新创建。x轴标签看起来像这样：

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

字符串
Y轴的标签是这样的：

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

型
您还可以使用样式表来设置这些标签的样式，无论是一起（.label）还是单独（.x.label，.y.label）。

在新的D3js版本（版本3及以后）中，当您通过d3.svg.axis()函数创建图表轴时，您可以访问两个名为tickValues和tickFormat的方法，这两个方法内置在函数中，以便您可以指定需要哪些值的刻度以及希望文本显示的格式：

var formatAxis = d3.format("  0");
var axis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatAxis)
        .ticks(3)
        .tickValues([100, 200, 300]) //specify an array here for values
        .orient("bottom");

字符串

如果你想像我一样把y轴的标签放在y轴的中间：
1.使用文本锚点中间旋转文本90度

• 按文本的中点翻译文本
• x位置：防止y轴刻度标签重叠（-50）
• y位置：与y轴中点（chartHeight / 2）匹配

代码示例：

var axisLabelX = -50;
var axisLabelY = chartHeight / 2;

chartArea
    .append('g')
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('transform', 'rotate(-90)')
    .text('Y Axis Label')
    ;

字符串
这防止了旋转整个坐标系，如上文lubar所述。

如果您使用d3.v4，就像建议的那样，您可以使用这个示例提供您需要的一切。
您可能只想用“天”替换X轴数据，但请记住正确解析字符串值，不要应用连接。
parseTime也可以用日期格式来处理天数缩放？

d3.json("data.json", function(error, data) {
if (error) throw error;

data.forEach(function(d) {
  d.year = parseTime(d.year);
  d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("fill", "#5D6971")
    .text("Population)");

字符串
fiddle with global css / js

D3提供了一组非常低级别的组件，您可以使用它们来组装图表。您将获得构建块，轴组件，数据连接，选择和SVG。您的工作是将它们组合在一起以形成图表！
如果你想要一个传统的图表，即一对轴，轴标签，图表标题和绘图区域，为什么不看看d3fc？它是一个开源的更高级别的D3组件集。它包括一个可能是你需要的图表组件：

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xLabel('Value')
  .yLabel('Sine / Cosine')
  .chartLabel('Sine and Cosine')
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

// render
d3.select('#sine')
  .datum(data)
  .call(chart);

字符串
你可以在这里看到一个更完整的例子：https://d3fc.io/examples/simple/index.html

chart.xAxis.axisLabel('Label here');

字符串
或

xAxis: {
   axisLabel: 'Label here'
},

型

在D3.js中自定义轴
https://ghenshaw-work.medium.com/customizing-axes-in-d3-js-99d58863738b

let xAxisGenerator = d3.axisBottom(xScale);
let tickLabels = ['A','B','C'];
xAxisGenerator.tickFormat((d,i) => tickLabels[i]);

字符串