1

基本问题是我在路径上有一个拖动事件，该路径在 x 轴上将路径转换了一定距离。

当另一个事件发生时，我想将路径返回到拖动事件之前的原始位置。

我试图用下面的代码做到这一点：

svg.select('#' + uniqueid + '-flare')
                    .select('path')
                    .transition().duration(1000)
                    .ease('linear')
                    .attr('transform', 'translate(0,0)');

这给了我警告“null parsing transform attribute”，并且 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)');
}
4

0 回答 0