javascript - d3 轴标记

Question

如何在 d3 中向轴添加文本标签？

例如，我有一个带有 x 轴和 y 轴的简单折线图。

在我的 x 轴上，我有从 1 到 10 的刻度。我希望“天”这个词出现在它下面，这样人们就知道 x 轴在计算天数。

同样，在 y 轴上，我将数字 1-10 作为刻度线，我希望“sandwiches eaten”这个词出现在侧面。

有没有简单的方法可以做到这一点？

Answer 1

轴标签不是内置于 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).