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

时间:2013-04-11 16:48:34

标签: d3.js

基本问题是我在路径上有一个拖动事件,它在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)');
}

0 个答案:

没有答案