所以我在d3中制作了一个图表并使用默认的x轴格式，
d3.axisBottom(x)
输出如下图：
如何手动创建和自定义此格式？特别是，我想使用简短的月份名称，例如“Oct”，这样“October”就不会掩盖下一年的标签。
Use tickFormat设置 x 轴刻度的格式。就你而言，.tickFormat(d3.timeFormat("%b"))将返回短月份名称（但它会使年份消失）。
这是演示：
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100)
var xScale = d3.scaleTime()
.domain([new Date("2014-01-01"), new Date("2016-01-01")])
.range([0, 450]);
var xAxis = d3.axisBottom(xScale)
.tickFormat(d3.timeFormat("%b"));
svg.append("g")
.call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>
要保留月/年默认功能，您需要创建自己的自定义格式。
var xAxis = d3.axisBottom(xScale)
.tickFormat(function(date){
if (d3.timeYear(date) < date) {
return d3.timeFormat('%b')(date);
} else {
return d3.timeFormat('%Y')(date);
}
});
检查演示：
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100)
var xScale = d3.scaleTime()
.domain([new Date("2014-01-01"), new Date("2016-01-01")])
.range([0, 500]);
var xAxis = d3.axisBottom(xScale)
.tickFormat(function(date){
if (d3.timeYear(date) < date) {
return d3.timeFormat('%b')(date);
} else {
return d3.timeFormat('%Y')(date);
}
});
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
d3.selectAll(".ticks");
<script src="https://d3js.org/d3.v4.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
