javascript - 在 d3js 中将数字转换为月份

标签 javascript d3.js

我正在尝试将数字转换为 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() 的函数采用 dataindex。你会想要索引。所以你可以这样做:

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/

相关文章:

javascript - 是否可以在 D3.js 中使用日期范围作为时间刻度上的单独日期项目?

javascript - d3js图表点和区域不更新

javascript - DOM元素的CSS默认样式

javascript - 在 Select Multiple Jquery 中获取禁用选项的值

javascript - React-Rails 未捕获类型错误 : Cannot read property 'title' of undefined

d3.js - 在 NVD3.js multiBarChart.js 上移动 "Stacked/Grouped"选择器

javascript - 附加非嵌套元素

javascript - JQuery 两种形式切换,提交时显示正确的形式

JavaScript 窗口 #hash Action

javascript - 工具提示不适用于初始绘图,但在绘图更改后开始工作