博客

常常需要画鼠标左右移动箭头。

下面是需要画一个点击箭头可以显示前一天/一月，或者点击向后箭头可以显示向后一天/一月的信息。

当点击向后箭头时，最后一天超过今天时， 显示最近一月的数据。同时隐藏向右箭头。

//arrow to select preday/nextday/premonth/nextmonth
var graph_width = $("#graph").width();
var margin = {top: 30, right: 20, bottom: 30, left: 20},
    barWidth = graph_width*0.085;
var barHeight = 50;
var rectNums = 0;
var sr = 12;
var duration = 400;

var DAYS_NUM = 31;
var today = moment().endOf("day");//get last time of today.
var startDate=moment().startOf("day").subtract(DAYS_NUM-1, 'day');
var endDate=moment().endOf("day");

var svg = d3.select('#graph').append('svg').attr("width", graph_width)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var image_data = [  {url:"img/fast-rewind.png",x:30,subday:DAYS_NUM-1,attr:'preday'},
                    {url:"img/rewind.png", x:60,subday:1,attr:'preday'},
                    {url:"img/foward.png", x:graph_width-margin.right - 60,subday: -1,attr:'nextday'},
                    {url:"img/fast-foward.png",x:graph_width-margin.right - 30,subday:-(DAYS_NUM-1),attr:'nextday'}
                  ];

var images = svg.selectAll("image").data(image_data);

images.enter()
    .append("svg:image")
    .attr("id", "image")
    .attr("xlink:href", function(d){return d.url;})
    .attr("x", function(d){return d.x})
    .attr("y", -barHeight/2)
    .attr("width", "30")
    .attr("height", "30")
    .attr('class',function(d){return d.attr;})
    .on('click',function(d){
          dayChange(d.subday);
    });

function dayChange(subday){
    console.log("lllllend--:"+endDate)
    startDate=startDate.subtract(subday, 'day');
    endDate=endDate.subtract(subday, 'day');
    if (endDate>today){  // make sure endData not bigger than today.
        endDate=moment(today);
        startDate=moment(today).startOf("day").subtract(DAYS_NUM-1, 'day');
    }
    //lr = subday>0?'l':'r';
    //data graph changes with Days change.
    //updateData(startDate,endDate);

    //hide arrow when endDate > today
    if (+endDate >= +today){
        $("svg .nextday").hide();
    }else{
        $("svg .nextday").show();
    }
}

这是段断码的显示结果和结构。