d3可滚动时间轴从最小值到最大值

时间:2015-10-01 08:48:54

标签: d3.js

有时间表http://jsfiddle.net/uWdkw/ 我写的代码如下。我想添加最小和最大日期值,并仅从最小日期值滚动到最大日期值。我该如何实现呢?有人可以帮我解决这个问题。

 var w = 500,
h = 300,
x = d3.time.scale().range([0, w]),  
xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-h, 0).tickPadding(6); 

var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h+50)
.append("svg:g");

svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")");

svg.append("svg:rect")
.attr("class", "pane")
.attr("width", w)
.attr("height", h)
.call(d3.behavior.zoom().on("zoom", zoom));

x.domain([new Date(1999, 0, 1), new Date(2014, 0, 0)]);

draw();

function draw() {
  console.log ("drawing");
  svg.select("g.x.axis").call(xAxis);
}

function zoom() {
  console.log("zooming");
  d3.event.transform(x); // TODO d3.behavior.zoom should support extents
  draw();
}

0 个答案:

没有答案