如何在d3js中沿x轴制作可滚动的轴/平移

Question

我正在尝试使用angularjs中的D3.js创建时间线图表，并选择沿x轴滚动以查看数据。

var rawSvg = element.find("svg")[0];

var width = 1000, height = 300;
var svg = d3.select(rawSvg)
                    .attr("width", width)
                    .attr("height", height);


// scale for x and y axis
var xScale = d3.time.scale().domain([new Date(), d3.time.day.offset(new Date(), 5)]).range([0, width]);
var yScale = d3.scale.linear().domain([28, 0]).range([0, height-75]);

var zoom = d3.behavior.zoom().x(xScale).y(yScale).scaleExtent([1,1]).on("zoom", zoomed);

// setting up axis
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.hour, 3).innerTickSize(-(height-75)).outerTickSize(2);

var yAxis = d3.svg.axis().scale(yScale).orient("left").outerTickSize(2).ticks(0).tickFormat(function(d){
            return '';
        }).tickPadding(10);

var g = svg.append("g").attr("transform","translate(20,10)").call(zoom);

// axis
g.append("g")
            .attr("class", "x-axis")
            .attr("transform","translate(0,"+(height-75)+")")
            .call(xAxis)
            .selectAll("text")  
            .style("text-anchor", "center");

g.append("g")
            .attr("class", "y-axis")
            .call(yAxis);


function zoomed(){
            svg.select('.x.axis').call(xAxis)
            // svg.select('.y.axis').call(yAxis)
}

但我无法做到这一点。我得到这样的图表。

但我想要的是显示当前日期数据，然后用户应该能够沿着x轴滚动以查看过去和未来的数据。

我想要实现像this这样的东西。

编辑

在上面的代码中，我无法捕获缩放事件，因此我添加了一个全长矩形，现在我可以捕获缩放事件。

g.append("rect")
            .attr("width", width)
            .attr("height", height-75)
            .style("fill", "none")
            .style("pointer-events", "all");

但我仍然无法沿x轴滚动。