How To Add Custom Value In Timeformat D3?

I have a data set with dates specified as date Q3 1954 Q4 1954 Q1 1955 Q2 1955 Q3 1955 Q4 1955 Q3 1955 Q4 1955 Q1 1956 I wanted this to be on the x-axis and with data points corre

Solution 1:

I figured out using scaleBand() could solve this issue.

code snippet for this axis is

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);

I also found the documentation from enter link description here

Thanks @Cyril for time.