javascript - 自定义 D3 LineChart 中的刻度线

Question

我正在尝试制作如下所示的折线图 -

这里 x 轴第一个值和 y 轴之间有一个很小的距离。

我可以实现如下所示 -

在这里，我无法将 x 轴第一个值与 y 轴的距离分开。

任何人都可以帮我在 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();
                }
        });     
    }

Answer 1

您可以通过向后移动 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),