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分钟，但这只是一个小选择错误。

就是这种情况。所以这里是'问题：

您正在将class名为x-axis（请注意破折号此处）添加到{{1>}中的 X轴但是功能，你正在寻找zoom的轴，这是不对的。所以这里是你小提琴的一个分支，解决了这个问题：

JS FIDDLE

代码更改：

.x.axis

另外，我已经将X轴上function zoomed(){ svg.select('.x-axis').call(xAxis) }的数量改为每6小时一次，以避免重叠。

希望这会有所帮助。：）

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

1 个答案: