我正在尝试将数字转换为 d3js 中的等效月份,但我被卡住了。这些数字以 1、2、3...12 的形式出现,我想将它们转换为一月、二月...十二月。
这是我到目前为止的想法:
var month = ["January","February","March","April","May","June","July", "August","September","October","November","December"];
var yScale = d3.scale.linear()
.range([50,500])
.domain([0,12]);
var y_axis = d3.svg.axis().scale(yScale).orient("left")
.tickValues(function(val){
return month[val-1];
});
我应该怎么做才能实现我的目标?
最佳答案
我认为您可能需要 tickFormat()
而不是 tickValues
。与大多数 d3 函数一样,传递给 tickFormat()
的函数采用 data
和 index
。你会想要索引。所以你可以这样做:
var y_axis = d3.svg.axis().scale(yScale).orient("left")
.tickFormat(function(d, i){
return month[i];
});
编辑:
我不确定您的其余代码是什么样的,因为这是一种快速的处理方式。但是,如果您正在处理诸如星期几之类的序数数据,可能使用序数标度会更好。
这是一个使用基于星期几的带轴刻度的简单示例:
<html>
<head>
<script src="./d3/d3.min.js"></script>
<style>
.axis text {
font: 10px sans-serif;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var margin = {top: 20, right: 10, bottom: 10, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var scale_y = d3.scaleOrdinal()
.domain(["January","February","March","April","May","June","July", "August","September","October","November","December"])
.range(Array.from(new Array(12), (x,i) => i* (height / 12)))
var yAxis = d3.axisLeft(scale_y)
var svg = d3.select("#chart")
.append("svg")
.attr( "width", width + margin.left + margin.right )
.attr( "height", height + margin.left + margin.right )
var y_axis = svg.append("g")
.attr("class", "x axis")
.attr('transform', 'translate(' + margin.left + ',' + margin.top +')')
.call(yAxis);
</script>
</body>
</html>
关于javascript - 在 d3js 中将数字转换为月份,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45446344/