Question

我有这段代码根据提供的数据在位置绘制rect：

var self = this;
var targetrect = d3.select(this.$el).select('svg').selectAll('g')
    .append('rect')
    .attr('x', function(d, i) {return d.pricepos - 5;})
    .attr('y', function(d, i) {return (i+1) *itemh - itemh/2 -5;})
    .attr('width','10')
    .attr('height','10')
    .attr('fill', '#000000');

然后，我想在timeout：

之后动画移动到目标位置

setTimeout(function(){ 
        self.targetrect
        .transition()
        .duration(1000)
        .attr('x', function(d, i) {return d.pricetargetpos - 5;});
}, 500);

但是我收到了一个错误：

未捕获的TypeError：无法读取属性＆＃39; transition＆＃39;未定义的

我该如何解决这个问题？

Answer 1

您尚未将targetrect分配给this。改变这一行：

var targetrect = d3.select(this.$el).select('svg').selectAll('g')

到

self.targetrect = d3.select(this.$el).select('svg').selectAll('g')

如果setTimeout函数与您指定targetrect的作用域的作用域相同，则可以在setTimeout回调中完全省略self，如下所示：

setTimeout(function(){ 
        targetrect
        .transition()
        .duration(1000)
        .attr('x', function(d, i) {return d.pricetargetpos - 5;});
}, 500);

d3v4 - ＆＃39;过渡＆＃39;未定义的

1 个答案: