定製刻度標記在D3應用於LineChart

在這裏有x軸的第一值和y軸之間的小的距離。

我可以實現如下 -

在這裏，我無法從y軸距離x軸的第一值。

任何人都可以幫助我在x軸和y軸線的第一個值之間引入空間。

這裏是我寫的代碼來實現相同的。

$(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(); 
       } 
     });  
    }

來源

2016-03-08 Sujith Kp

您可以通過移動背後10天捏捏分鐘日期如下所示：

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

工作實例here

在你的情況下，它會像做分鐘日期是這樣的：

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

來源

2016-03-08 09:32:27 Cyril

謝謝@Cyril，這正是我想要的。 –

定製刻度標記在D3應用於LineChart

回答

相關問題