我正在尝试从scaleTime的x轴上删除月份和年份刻度，但不知道是否可能：
我尝试使用 tickFormat 方法，但无法访问月份和年份值。我只能通过将比例更改为 LinearScale 并手动格式化值来获得预期结果。
有可能在时间尺度上得到预期的结果吗？
const margin = { top: 20, right: 20, bottom: 20, left: 20 };
const width = 1000 - margin.top - margin.bottom;
const height = 100 - margin.left - margin.right;
const totalWidth = width + margin.top + margin.bottom;
const totalHeight = height + margin.left + margin.right;
let svg = d3.select('.chart')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
let xScale = d3.scaleTime()
.rangeRound([0, width])
.domain([
new Date(1482883200000), // 2016-12-28
new Date(1485993600000) // 2017-02-02
]);
let xAxis = d3
.axisBottom(xScale);
svg.call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>
因为很难知道how轴生成器将显示时间刻度的刻度，我建议您在创建刻度后过滤它们：
d3.selectAll(".tick").each(function(d) {
if (d3.timeFormat("%Y")(d) == d3.select(this).text() ||
d3.timeFormat("%B")(d) == d3.select(this).text()) {
d3.select(this).remove();
}
})
这是演示：
const totalWidth = 800;
const totalHeight = 100;
let svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
let xScale = d3.scaleTime()
.rangeRound([20, totalWidth - 20])
.domain([
new Date(1482883200000), // 2016-12-28
new Date(1485993600000) // 2017-02-02
]);
let xAxis = d3.axisBottom(xScale);
svg.append("g").attr("transform", "translate(0,40)").call(xAxis);
var format = d3.timeFormat("%a %d");
d3.selectAll(".tick").each(function(d) {
if (d3.timeFormat("%Y")(d) == d3.select(this).text() || d3.timeFormat("%B")(d) == d3.select(this).text()) {
d3.select(this).remove();
}
})
<script src="https://d3js.org/d3.v4.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
