同时转换xAxis和数据- D3.js
Transitioning xAxis and data at the same time - D3.js
我正在尝试使用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; })
与实际数据匹配
相关文章:
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG,但不显示任何内容
- d3.js:限制画笔的大小
- d3.js用按钮更新条形图工具提示
- 如何为d3.js图表输出组织/嵌套数据
- d3-js快速事件调用问题
- D3.JS向rect添加缩放和列表项
- d3.js圆的半径是否可以由样式属性指定
- 如何在d3.js中自定义事件侦听器
- 在新窗口上使用d3.js
- 如何用d3.js绘制折线图
- 使用dc.js、d3.js和crossfilter引用错误
- D3.js剪辑路径截断了我的图的边缘
- D3.js和坐标系