Я пытаюсь преобразовать числа в эквивалентный месяц в 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>