javascript - 如何在 timeFormat d3 中添加自定义值？

Question

我有一个数据集，日期指定为 date

Q3 1954
Q4 1954
Q1 1955
Q2 1955
Q3 1955
Q4 1955
Q3 1955
Q4 1955
Q1 1956

我希望它位于 x 轴上，并且数据点对应于每个日期。

在 D3 v4 中是否有时间格式来将此类日期系列指定到轴中？

Answer 1

我发现使用 scaleBand() 可以解决这个问题。

这个轴的代码片段是

 var width = 800, height = 800;

var ydata = [10, 15, 20, 25, 30];
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var xaxis  = d3.scaleBand()
                .rangeRound([0, width])
                .padding(1);

d3.csv("static/date.csv", function(data){
        xaxis.domain(data.map(function(d) { return d.date; }))

        var x_axis = d3.axisBottom()
                        .scale(xaxis);

        var xAxisTranslate = height/2 + 10;

        svg.append("g")
        .attr("transform", "translate(50, " + xAxisTranslate  +")")
        .call(x_axis)
});

var yscale = d3.scaleLinear()
               .domain([0, d3.max(ydata)])
               .range([height/2, 0]);

var y_axis = d3.axisLeft()
               .scale(yscale);

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

我还从 enter link description here 找到了文档

感谢@Cyril 抽出时间。