【发布时间】：2012-06-26 16:55:56
【问题描述】：
如何在 d3 中向坐标轴添加文本标签？
例如，我有一个带有 x 和 y 轴的简单折线图。
在我的 x 轴上，我有从 1 到 10 的刻度。我希望在其下方出现“天”这个词，以便人们知道 x 轴正在计算天数。
同样，在 y 轴上，我将数字 1-10 作为刻度，我希望“吃的三明治”字样出现在侧面。
有没有简单的方法来做到这一点？
【问题讨论】：
标签： javascript d3.js axis-labels
【发布时间】：2012-06-26 16:55:56
【问题描述】：
轴标签不是 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)。
【讨论】：
-
我发现
.attr("transform", "rotate(-90)")会导致整个坐标系统旋转。因此，如果您使用“x”和“y”进行定位，则需要交换我所期望的位置。 -
对于多个图表并在所有图表上都需要轴标签的情况有什么特殊考虑吗？
-
在阅读了这么多通过对 x 和 y 值进行数学运算来明确定位轴标签的教程之后......我终于注意到您的答案提到的 text-anchor SVG 属性，这有助于使标签坚持无需知道标签自身的宽度/高度即可计算偏移量。
在新的 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");
【讨论】：
-
很好的解释，但似乎 OP 已经在他们的轴上打勾了。
-
操作？我不明白缩写，抱歉。
-
不用担心。 OP =“原始帖子”或“原始海报”。 （搜索引擎和 urbandictionary.com 是此类缩写的很好参考。）
如果你想像我一样将 y 轴标签放在 y 轴的中间：
- 使用文本锚中间旋转文本 90 度
- 按中点翻译文本
- x 位置：防止 y 轴刻度标签重叠 (
-50) - y位置：匹配y轴的中点（
chartHeight / 2）
- x 位置：防止 y 轴刻度标签重叠 (
代码示例：
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)");
【讨论】：
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'
},
【讨论】：