logo标签列表

如何将D3时间刻度从V3转换为V4？

javascriptd3.js
3

我希望将这段代码从D3.js的V3版本转换为V4版本：

var monthArray = d3.time.scale()
                .domain(d3.extent(metricMonths))
                .ticks(d3.time.months, 1);
文档对迁移有何说明？ - evolutionxbox
非常感谢，但如果我能理解并在文档中找到答案，我就不会发表问题。 - Omayma HARBAOUI
这并不总是正确的。人们在没有阅读相关文档的情况下就发布了许多关于各种主题的问题。 - evolutionxbox
1个回答
0

以下代码适用于D3 V4：

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const xScale = d3.scaleTime()
    .domain([new Date(2020, 0, 1), new Date(2020, 11, 1)])
    .range([0, 500]);

const xAxis = d3.axisBottom()
    .scale(xScale)
    .ticks(12)
    .tickFormat(d => months[d.getMonth()])

const svg = d3.select("svg")

svg.append("g")
    .attr("transform", "translate(20,30)")
    .call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="600" height="100" />

更新：这段代码同样可以正常工作：

const xScale = d3.scaleLinear()
        .domain([0, 11])
        .range([0, 500]);

const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(12)
        .tickFormat(d => months[d])
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接