D3变换转换“null解析变换属性”

id_aut 发布于 2019-03-09 d3.js 最后更新 2019-03-09 14:42 0 浏览

基本的问题是,我在路径上有一个拖动事件,该路径在x轴上将路径转移一定距离。 当另一个事件发生时,我想在拖动事件之前将路径返回到其原始位置。 我试图用下面的代码来做到这一点:

svg.select('#' + uniqueid + '-flare')
                    .select('path')
                    .transition().duration(1000)
                    .ease('linear')
                    .attr('transform', 'translate(0,0)');
这是给我警告“空解析转换属性”和HTML中的SVG容器显示transform =“”。 使用下面的代码很好,但是不稳定。我想要过渡提供的流畅动画。
svg.select('#' + uniqueid + '-flare')
                    .select('path')
                    .attr('transform', 'translate(0,0)');
有任何想法吗?谢谢! 更新 拉斯要求看到更多的代码。所以......(非常简略)
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)');
}
已邀请: