同时转换xAxis和数据- D3.js

Transitioning xAxis and data at the same time - D3.js

本文关键字:D3 js 数据 转换 xAxis      更新时间:2023-09-26

我正在尝试使用D3.js创建一种时间线图。我已经得到了大部分的控制逻辑,但我的数据点的行为不像预期的那样,我在页面之间移动。时间轴显示持续一周的数据收集的3小时窗口。用户可以点击左右箭头,以三个小时为单位向前或向后移动。

由于每次单击都要获取接下来三个小时的数据,我期望exit()函数包含所有以前的数据点,因为它们都应该离开屏幕,但这似乎没有发生。相反,它删除了第一页上10个点中的5个。我可以通过不使用exit()和手动强制删除所有点来获得我想要的行为,但我宁愿理解为什么它不能使用exit()。

更复杂的是,当数据退出和进入图表时,它会从右向左转换。同时,我对xAxis的域边界进行了过渡,以使用户在时间上向前移动。我开始怀疑,正是这种转换导致exit()函数对图表上应该和不应该出现的内容感到困惑。

我已经包含了一段处理从图表中删除元素的代码。如果需要任何其他代码片段,请告诉我。

elements = svg.selectAll('.news').data(data.items);
// Remove
                var exitingLabels = elements.exit(),
                    updatingLabels = elements,
                    creatingLabels = elements.enter();
                console.log(exitingLabels.selectAll('rect'));
                console.log(updatingLabels.selectAll('rect'));
                console.log(creatingLabels);
                exitingLabels.selectAll('circle')
                    .transition()
                    .duration(1500)
                    .ease('sin-in-out')
                    .attr('cx', function(d){return x($window.moment(d.date, 'YYYY-MM-DDTHH:mm:ss.000Z').clone().subtract(scope.zoomLevels[scope.zoomLevel].value, scope.zoomLevels[scope.zoomLevel].unit).format('x')) + 29;});
                exitingLabels.selectAll('line')
                    .transition()
                    .duration(1500)
                    .ease('sin-in-out')
                    .attr('x1', function(d){return x($window.moment(d.date, 'YYYY-MM-DDTHH:mm:ss.000Z').clone().subtract(scope.zoomLevels[scope.zoomLevel].value, scope.zoomLevels[scope.zoomLevel].unit).format('x')) + 29;})
                    .attr('x2', function(d){return x($window.moment(d.date, 'YYYY-MM-DDTHH:mm:ss.000Z').clone().subtract(scope.zoomLevels[scope.zoomLevel].value, scope.zoomLevels[scope.zoomLevel].unit).format('x')) + 29;});
                exitingLabels.selectAll('rect')
                    .transition()
                    .duration(1500)
                    .ease('sin-in-out')
                    .attr('x', function(d){return x($window.moment(d.date, 'YYYY-MM-DDTHH:mm:ss.000Z').clone().subtract(scope.zoomLevels[scope.zoomLevel].value, scope.zoomLevels[scope.zoomLevel].unit).format('x'));});
                exitingLabels.selectAll(function() { return this.getElementsByTagName('foreignObject'); })
                    .transition()
                    .duration(1500)
                    .ease('sin-in-out')
                    .attr('x', function(d){return x($window.moment(d.date, 'YYYY-MM-DDTHH:mm:ss.000Z').clone().subtract(scope.zoomLevels[scope.zoomLevel].value, scope.zoomLevels[scope.zoomLevel].unit).format('x'));});
                exitingLabels.transition()
                    .delay(1600)
                    .each('end', function(a){console.log(a);})
                    .remove();

数据。Items是获取新数据的异步调用的结果,此代码位于该函数的回调中。

您需要为.data()指定一个键函数,否则将按索引进行匹配。例如.data(data.items, function(d) { return d; })与实际数据匹配