如何在timeFormat d3中添加自定义值?

时间:2017-11-08 07:21:42

标签: javascript d3.js

我的数据集的日期指定为date

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

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

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

1 个答案:

答案 0 :(得分: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 image description here

我还找到了enter link description here

的文档

感谢@Cyril的时间。