d3 fisheye（d）返回undefined對象

Question

所以我正在使用d3魚眼插件，而且我遇到了一些相當基本的問題。 我實現了這個非常基本的代碼，非常直接拷貝從這裏https://github.com/d3/d3-plugins/tree/master/fisheye

fisheye = d3.fisheye.circular() 
     .radius(200) 
     .distortion(2); 

    //initialize fisheye 
    chart.on("mousemove", function() { 
     fisheye.focus(d3.mouse(this)); 

     dataPoint.each(function(d) { d.fisheye = fisheye(d); }) 
      .attr('y', function(d){ return d.fisheye.y; }) 
      .attr('x', function(d){ return d.fisheye.x; }); 
    }); 

但d.fisheye.x和d.fisheye.y是不確定的。其實，看着fisheye(d)，它返回：

{x: undefined, y: undefined, z: 1} 

在另一方面，d3.mouse(this)正確返回一個數組。

有沒有人有建議，爲什麼這可能會發生？

更多代碼：順便說一句，代碼是這樣的，因爲它在一個ext-js面板中，所以每個函數（drawWords是這個對象的一個​​屬性）。這有點複雜，這就是爲什麼我猶豫要發佈一切，而這仍然不是全部代碼，而是我認爲的相關部分。我沒有包含任何其他全局變量或輔助函數的初始化。

//imagine some sort of onload function 
    onLoad: function() { 
     this.drawWords(); 
     this.animateVis(); 
    } 

,drawWords: function() { 
    toolObject = this; 
    var h = this.body.getHeight(), 
     w = this.body.getWidth(); 

    //initialize word text 
    this.dataPoint = this.chart.selectAll('text') 
     .data(toolObject.termometerData, function (d) {return d.word;}) 
     .enter().append('text') 
     .attr('class', 'points') 
     .attr('id', function(d) {return d.word + '-point';}) 
     .attr('x', function() { 
      return toolObject.xScale(toolObject.shiftCount); 
     }) 
     .attr('y', function (d) { 
      return toolObject.fanVertical(d, toolObject.shiftCount); 
     }) 
     .attr('transform', function (d) { 
      var thisXPosition = toolObject.xScale(toolObject.shiftCount), 
       thisYPosition = toolObject.fanVertical(d, toolObject.shiftCount); 
      return 'translate(0, 0) rotate(-20 ' + thisXPosition + ' ' + thisYPosition + ')'; 
     }) 
     .attr('text-anchor', 'middle') 
     .attr('fill-opacity', function (d) {return toolObject.opacityScale(0);}) 
     .text(function(d) {return d.word;}); 

    this.applyFisheye(); 
} 

,fisheye: d3.fisheye.circular() 
     .radius(200) 
     .distortion(2) 

,applyFisheye: function() { 
    var toolObject = this; 

    //initialize fisheye 
    this.chart.on("mousemove", function() { 

     fisheye.focus(d3.mouse(this)); 

     toolObject.dataPoint.each(function(d) { d.fisheye = toolObject.fisheye(d); }) 
      .attr('y', function(d){ return d.fisheye.y; }) 
      .attr('x', function(d){ return d.fisheye.x; }) 
      .attr('transform', function(d){ 
       return 'translate(0, 0) rotate(-20 ' + d.fisheye.x + ' '+ d.fisheye.y + ')'; 
      }); 
    }); 
} 
,animateVis: function() { 
    var toolObject = this; 
    var h = this.body.getHeight(), 
     w = this.body.getWidth(); 

    var tick; 

    if(this.animationIdArray.length < 1){ 
     tick = setInterval(function(){ 
      animate(); 
     }, this.duration); 
     this.animationIdArray.push(tick); 
    } 

    function animate() { 
     if(toolObject.shiftCount < toolObject.numDataPoints){ 
      toolObject.shiftCount++; 

      //animate words 
      toolObject.dataPoint.transition() 
       .duration(toolObject.duration) 
       .ease('linear') 
       .attr('x', function(d){ return toolObject.xScale(toolObject.shiftCount - 1); }) 
       .attr('y', function(d){ return toolObject.fanVertical(d, toolObject.shiftCount - 1); }) 
       .attr('transform', function(d){ 
        var thisXPosition = toolObject.xScale(toolObject.shiftCount - 1), 
         thisYPosition = toolObject.fanVertical(d, toolObject.shiftCount - 1); 
        return 'translate(0, 0) rotate(-20 ' + thisXPosition + ' '+ thisYPosition + ')'; 
       }) 
       .attr('fill-opacity', function(d){ 
        return toolObject.opacityScale(d.series[toolObject.shiftCount - 1].freq); 
       }); 

      toolObject.applyFisheye(); 
     }else{ 
      clearInterval(tick); 
      toolObject.animationIdArray.shift(); 
     } 
    } 
} 

Answer 1

fisheye假定您的對象的x和y座標是由名爲「x」和「y」的鍵定義的。這也可能是足夠的（但可能矯枉過正，根據此代碼調用頻率）使用

this.dataPoint 
    .each(function(d) { 
     d.x = toolObject.xScale(toolObject.shiftCount); 
     d.y = toolObject.fanVertical(d, toolObject.shiftCount) 
    .attr('x', function(d) { return d.x; }) 
    .attr('y', function(d) { return d.y; }); 

當你//initialize word text