d3轴标记

Question

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

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

在我的x轴上,我有从1到10的刻度.我想在它下面出现"天"这个词,所以人们知道x轴正在计算天数.

同样,在y轴上,我将数字1-10作为刻度,我希望"吃三明治"这两个词出现在侧面.

有一个简单的方法吗？

Answer 1

轴标签不是内置于D3的轴组件,但您可以通过添加SVG text元素自行添加标签.这方面的一个很好的例子是我重新创造了Gapminder的动画气泡图,即"财富与健康国家".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).

Answer 2

在新的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");

Answer 3

如果你想像我一样在y轴中间的y轴标签:

1. 使用文本锚中间旋转文本90度
2. 翻译文本的中点
   • 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所述.