如何在 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

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

这就是一个例子。所以问题来了：

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

JS FIDDLE

代码更改：

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

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

希望这对您有所帮助。 :)

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

how to make scrollable axis/ pan along x-axis in d3js

javascript

scroll

zooming

d3.js

angularjs