CODEWITHSUNDEEP
javascriptjqueryd3.jssvg
Sujith Kp
Sujith Kp

Reputation: 1105

Customizing the tick marks in D3 LineChart

I am trying to make a line chart as shown below -

enter image description here

Here there is a small distance between the x-axis first value and the y-axis.

I could achieve as shown below -

enter image description here

Here I am not able to distance the x-axis first value from y-axis.

Can anyone help me to bring the space between first value in x-axis and y-axis line.

here is the code that I wrote to achieve the same.

$(document).ready (function (a){
var width = 400,
height = 150,
padding = {top: 10, bottom: 30, left: 40, right: 40};

vis = d3.select("#graph").append("svg:svg")
    .attr("width", width)
    .attr("height", height);

    var yScale = d3.scale.linear()
        .domain([0, 100])    
        .range([height - padding.bottom, padding.top]);

    var mindate = new Date(2012,0,1),
        maxdate = new Date(2012,5,31);  

    var xScale = d3.time.scale()
        .domain([mindate, maxdate])   
        .range([padding.left , width - padding.right * 2]);

    var yAxis = d3.svg.axis()
                .orient("left")
                .scale(yScale)
                .outerTickSize(0)
                .ticks(5);


    var xAxis = d3.svg.axis()
                .scale(xScale)  .outerTickSize(0)                       
                .tickFormat(d3.time.format("%b"))
                .tickPadding(5)
                .ticks(6);

    vis.append("g")
        .attr("transform", "translate(" + padding.right + ",0)")
        .attr("class", "y-axis")            
        .call(yAxis);           

    vis.append("g")
        .attr("transform", "translate(0," + (height - padding.bottom) + ")")
        .attr("class", "x-axis")
        .call(xAxis);

    var xaxistickmarksY2 = vis.selectAll(".x-axis line")
        .attr("y2");

    var yaxistickmarksX2 = vis.selectAll(".y-axis line")
        .attr("x2");

    // Define the line
    var valueline = d3.svg.line().x(function(d) { 
        return xScale(Date.parse(d.date)); 
    }).y(function(d) { 
        return yScale(d.value); 
    });

        var data = [{date: "January 01, 2012", value: 40},{date: "March 01, 2012", value: 40},{date: "April 01, 2012", value: 50},{date: "May 01, 2012", value: 20}];       

    vis.append("path")  
        .attr("class", "line")
        .attr("d", valueline(data));

    vis.selectAll(".y-axis line")
        .attr("x2", (-1 * yaxistickmarksX2));   

    vis.selectAll(".x-axis line")
        .attr("y2", (-1 * xaxistickmarksY2));

    removeFirstTicks();

    vis.selectAll("path")
        .style ("fill", "none")
        .style ("stroke", "black")
        .style ("stroke-width", "px")
        .style ("shape-rendering", "crispEdges");

    vis.selectAll("line")
        .style ("fill", "none")
        .style ("stroke", "black")
        .style ("stroke-width", "px")
        .style ("shape-rendering", "crispEdges");               

    function removeFirstTicks() {
        vis.selectAll(".x-axis .tick")
            .each(function (d,i) {

                if ( i === -1 ) {
                    this.remove();
                }
        });

        vis.selectAll(".y-axis .tick")
            .each(function (d,i) {

                if ( i === 0 ) {
                    this.remove();
                }
        });     
    }

Upvotes: 1

Views: 86

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can tweak the min date by moving 10 days behind like shown below:

x.domain([d3.min(data, function(d) { 
  var d1 = new Date(d.date);//make a date object
  d1.setDate(d.date.getDate()-10);//move 10 days back
  return d1; //return 10 days back
}), d3.max(data, function(d) { return d.date; })]);

y.domain([0, d3.max(data, function(d) { return d.close; })]);

Working example here

In your case it will be like making min date like this:

var mindate = new Date(2011,12,20),

Upvotes: 1

Related Questions