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

Question

我正在尝试使用 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();

data.items 是异步调用获取新数据的结果，此代码位于该函数的回调内。

Answer 1

需要为.data()指定一个关键函数，否则会按索引匹配。例如。 .data(data.items, function(d) { return d; }) 以匹配实际数据。