100

如何将文本标签添加到 d3 中的轴？

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

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

同样，在 y 轴上，我将数字 1-10 作为刻度，并且我希望“吃的三明治”一词出现在侧面。

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

4

6 回答 6

183

轴标签不是内置到 D3 的轴组件中，但您可以通过添加 SVGtext元素自己添加标签。一个很好的例子是我对 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)。

于 2012-06-25T18:18:35.470 回答
36

在新的 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");
于 2013-12-02T10:33:46.540 回答
15

如果您希望 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 所述。

于 2015-05-23T21:56:10.657 回答
3

如果您按照建议在 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)");

摆弄全局 css / js

于 2017-06-28T14:16:11.967 回答
1

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

于 2016-02-11T17:26:27.713 回答
0 
chart.xAxis.axisLabel('Label here');

或者

xAxis: {
   axisLabel: 'Label here'
},
于 2017-12-14T11:20:10.743 回答