基本问题是我在路径上有一个拖动事件,它在x轴上转换了一定距离的路径。
当另一个事件发生时,我想在拖动事件之前将路径返回到其原始位置。
我尝试使用以下代码执行此操作:
svg.select('#' + uniqueid + '-flare')
.select('path')
.transition().duration(1000)
.ease('linear')
.attr('transform', 'translate(0,0)');
这给了我警告“null解析转换属性”,HTML中的SVG容器显示了transform =“”。
使用以下代码可以很好地工作,但是不稳定。我想要过渡提供的流畅动画。
svg.select('#' + uniqueid + '-flare')
.select('path')
.attr('transform', 'translate(0,0)');
有什么想法吗?谢谢!
更新
Lars要求查看更多代码。所以......(这是非常简略的)
var dragtype, dragsum;
var wordDrag = d3.behavior.drag()
.origin(Object)
.on('drag', function (d) {
if(dragType != d.word) {
dragType = d.word;
dragSum = 0;
}
//update current position
dragSum = dragSum + parseInt(d3.event.dx);
var xMovement = parseInt(this.getAttribute('x')) + parseInt(d3.event.dx);
d3.select(this)
.attr('class', 'dragged-points')
.attr('x', xMovement);
if(uniqueId == d.word) {
svg.select('#' + uniqueId + '-flare')
.select('path')
.attr('transform', 'translate(' + dragSum + ',0)');
}
}
});
word.selectAll('text')
.data(data)
.enter().append('text')
.attr('class', 'points')
.attr('id', ... )
.attr('x', ...)
.attr('y', ...)
.call(wordDrag);
tick = setInterval(function(){
animate();
}, 1000);
function animate() {
word.transition()
.duration(1000)
.ease('linear')
.attr('x', ...)
.attr('y', ...);
svg.select('#' + uniqueId + '-flare')
.select('path')
.transition().duration(1000)
.ease('linear')
.attr('transform', 'translate(0,0)');
}