d3v4 - 未定義 - 優文庫

「過渡」我有這樣的代碼，基於所提供的數據，在位置繪製rect：d3v4 - 未定義

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);

，但我得到了一個錯誤：

Uncaught TypeError: Cannot read property 'transition' of undefined

我怎樣才能解決這個問題？

來源

2017-08-02 sooon

你把'targetrect'分配給'this' /'self'的地方？你要麼錯過了那個部分，要麼就不在問題中。 – Svenskunganka

@Svenskunganka根據你的評論，我只是拿出'self'並且它可以工作。你可以把你的評論作爲答案，以便我可以接受它嗎？ – sooon

完成。一個小技巧是使用ES2015箭頭函數來將範圍保存到'this'，因此您不必再次執行'var self = this'。 – Svenskunganka

您還沒有賦予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);

來源

2017-08-02 03:05:50 Svenskunganka

d3v4 - 未定義

回答

相關問題