0

所以我正在使用 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();
        }
    }
}
4

1 回答 1

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

于 2013-06-26T20:49:14.167 回答