如何在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 轴滚动。

Answer 1

有趣的是，有时调试问题可能会占用大量时间，但解决方案将是次要拼写/选择错误。我确实花了大约 40 分钟，但这只是一个小的选择错误。

这是一种情况。所以这里的问题：

您正在将一个名为 x-axis 的 class（注意此处的 破折号）应用到 X 轴 但在您的 zoom 函数中，您正在寻找对于带有.x.axis 的轴，这是不对的。所以这是解决问题的小提琴的一个分支：

JS FIDDLE

代码更改：

function zoomed(){
    svg.select('.x-axis').call(xAxis)
}

另外，我已将 X 轴上 ticks 的数量更改为每 6 小时一次以避免重叠。

希望这会有所帮助。 :)