Конвертировать число в месяц в d3js

Question

Конвертировать число в месяц в d3js

1

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

Что я должен сделать для достижения своей цели?

dawit 01 авг. 2017, в 22:03

Источник

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Mark Meyer · Accepted Answer · 2017-08-01T18-32-00.000Z

Я думаю, вам может понадобиться 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>

Это звучит в правильном направлении, но это не работает
@ увидеть изменения для другого подхода.