外部元素控制d3.js时间轴前进后退播放暂停

2015年03月05日 javascript 暂无评论 阅读 434 views 次

2015-03-05_105428

<!DOCTYPE html>
<meta charset="utf-8">
<title>外部元素控制d3时间轴前进后退播放暂停</title>
<style>
.axis text {
font: 11px sans-serif;
}
.axis path {
display: none;
}
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.grid-background {
fill: #ddd;
}
.grid line, .grid path {
fill: none;
stroke: #fff;
shape-rendering: crispEdges;
}
.grid .minor.tick line {
stroke-opacity: .5;
}
.brush .extent {
stroke: #000;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.ctrl li {
display: inline-block;
cursor:pointer;
}

</style>
<body>
<ul class="ctrl">
<li id="ctrl_back">
Back </li>
<li id="ctrl_stop">
Stop </li>
<li id="ctrl_play">
play </li>
<li id="ctrl_forward">
Forward </li>
</ul>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

//此处为传入的数据。如果与服务器结合,更换这些参数为传来的json串即可。

var jsonStartTime=new Date(2013, 2, 1);
var jsonEndTime=new Date(2013, 2, 16);
var dragSquareStart=new Date(2013, 2, 10);
var dragSquareEnd=new Date(2013, 2, 11);

//定时器。为自动播放创建的计时器。

var timer;

var margin = {top: 200, right: 40, bottom: 200, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
.domain([jsonStartTime, jsonEndTime - 1])
.range([0, width]);

var brush = d3.svg.brush()
.x(x)
.extent([dragSquareStart,dragSquareEnd])
.on("brush", brushed);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
.attr("class", "grid-background")
.attr("width", width)
.attr("height", height);

svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.hours, 12)
.tickSize(-height)
.tickFormat(""))
.selectAll(".tick")
.classed("minor", function(d) { return d.getHours(); });

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.days)
.tickPadding(0))
.selectAll("text")
.attr("x", 6)
.style("text-anchor", null);

var gBrush = svg.append("g")
.attr("class", "brush")
.call(brush);

gBrush.selectAll("rect")
.attr("height", height);

function brushed() {
var extent0 = brush.extent(),
extent1;

// if dragging, preserve the width of the extent
if (d3.event.mode === "move") {
var d0 = d3.time.day.round(extent0[0]),
d1 = d3.time.day.offset(d0, Math.round((extent0[1] - extent0[0]) / 864e5));
extent1 = [d0, d1];
}

// otherwise, if resizing, round both dates
else {
extent1 = extent0.map(d3.time.day.round);

// if empty when rounded, use floor & ceil instead
if (extent1[0] >= extent1[1]) {
extent1[0] = d3.time.day.floor(extent0[0]);
extent1[1] = d3.time.day.ceil(extent0[1]);
}
}

d3.select(this).call(brush.extent(extent1));
}
function autoPlayBrush(){

//保持只有一个定时器

if (timer>1){
clearInterval(timer);
}

timer=setInterval( function(){$("#ctrl_forward").click();}, 1000 );

}
function stopPlayBrush(){
clearInterval(timer);

}

function stepAction(opt,obj) {
var step1=0,step2=0;
if (opt=="back")
{
step1=step1-2;
step2=step2-1;
}
else if( opt=="forward")
{
step1=step1;
step2=step2+1;
}
var brush=obj;
//console.log(brush);

 

var extent0 = brush.extent(), extent1;

var d0 = d3.time.day.round(extent0[0]),
ds = d3.time.day.offset(d0, Math.round((extent0[1] - extent0[0]) / 864e5)+step1);
dd = d3.time.day.offset(d0, Math.round((extent0[1] - extent0[0]) / 864e5)+step2);

//计算上面的黑块平移一个时间单位。

if (ds<jsonStartTime){

//超出时间轴部分。回归。
d0=jsonEndTime;
ds = d3.time.day.offset(d0, Math.round((extent0[1] - extent0[0]) / 864e5)+step1);
dd = d3.time.day.offset(d0, Math.round((extent0[1] - extent0[0]) / 864e5)+step2);
//return false;
}
if (dd>jsonEndTime){

//超出时间轴部分。回归。
d0=jsonStartTime;
ds =d0;
dd = d3.time.day.offset(d0, Math.round((extent0[1] - extent0[0]) / 864e5));
//return false;
}

extent1 = [ds, dd];

d3.select("brush").call(brush.extent(extent1));
$("g.brush").remove();

 

var gBrush = svg.append("g")
.attr("class", "brush")
.call(brush);
gBrush.selectAll("rect").attr("height", height);

}

//后退

$("#ctrl_back").click(function(){

stepAction("back",brush);

});

//前进

$("#ctrl_forward").click(function(){

stepAction("forward",brush);

});

//停止

$("#ctrl_stop").click(function(){

stopPlayBrush();

});

//播放
$("#ctrl_play").click(function(){

autoPlayBrush();

});

autoPlayBrush();
</script>

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: