D3.JS将轴刻度中的文本更改为自定义字符串 [英] D3.JS change text in axis ticks to custom strings

问题描述

我想在每个g.tick中选择每个文本元素，并将文本分别更改为"2012"，"2013"​​，"2014"，"2015"，而不是分别为0、4、8、12

I want to select each text element in each g.tick and change the text to be "2012", "2013", "2014", "2015" instead of 0, 4, 8, 12 respectively

我首先尝试将所有这些文本元素捕获为数组，但这没有用:var arrOfText = d3.selectAll("g.yaxis g.tick text")

I've tried first to grab all of these text elements as an array, but this was not working: var arrOfText = d3.selectAll("g.yaxis g.tick text")

推荐答案

查看d3的 axis.tickFormat([format]) 函数-它允许您指定数据格式化的方式.

Look into d3's axis.tickFormat([format]) function - it lets you specify how you want your data formatted.

这是一个简单的示例，您可以对其进行编辑以适合您的用例.

Here's a simple example you can edit to fit your use case.

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21])
    .tickFormat(function(d, i){ return "Num = " + d; });

这篇关于D3.JS将轴刻度中的文本更改为自定义字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！