force.start()在d3的强制布局中将x,y,px和py初始化为NaN

Question

我正在尝试编写D3构造的包装库,并为以下一个http://vallandingham.me/gates_bubbles/遇到了障碍.这是用咖啡脚本写的,我把它翻译成了javascript.这是代码:

(function () {
var $, DD3;

DD3 = window.DD3 = {};

$ = jQuery;



function AJAX(uri, cons) {
    $.ajax({
        url: uri,
        type: 'GET',
        dataType: 'json',
        async: true,
        error: function (jqXHR, textStatus, errorThrown) {
            alert(uri);
        }
    }).done(function (data) {
        cons.data = data;
        cons.generate();

    });
}
// Other constructs
DD3.Bubble_Force = (function(){
    function Bubble_Force(options){
        if (!(this instanceof DD3.Bubble_Force)) {
            return new DD3.Bubble_Force(options);
        }
        if (typeof options.element === 'string') {
            this.el = $(document.getElementById(options.element));
        } else {
            this.el = $(options.element);
        }
        if (this.el === null || this.el.length === 0) {
            throw new Error("Graph placeholder not found.");
        }

        var div = this.el[0];           
        var _THIS = this;

        Bubble_Force.prototype.width = options.width !== "undefined" && options.width !== null ? options.width : $(div).parent().width(),
        Bubble_Force.prototype.height = options.height !== "undefined" && options.height !== null ? options.height : 500;

        Bubble_Force.prototype.data = typeof options.data === "string" ? {} : options.data;

        Bubble_Force.prototype.generate = function(){
            var layout_gravity = -0.01,
                damper = 0.1,
                vis = null,
                circles = null,
                force = null,
                fill_color = d3.scale.ordinal().domain(["low", "medium", "high"]).range(["#d84b2a", "#beccae", "#7aa25c"]),
                year_centers = {
                                "2008": {
                                    x: this.width / 3,
                                    y: this.height / 2
                                  },
                                  "2009": {
                                    x: this.width / 2,
                                    y: this.height / 2
                                  },
                                  "2010": {
                                    x: 2 * this.width / 3,
                                    y: this.height / 2
                                  }
                               },
                max_amount = d3.max(_THIS.data, function(d) {
                  return parseInt(d.total_amount);
                }),
                radius_scale = d3.scale.pow().exponent(0.5).domain([0, max_amount]).range([2, 85]),
                center = {
                  x: this.width / 2,
                  y: this.height / 2
                },
                nodes = [];

            var d;
            for(d in this.data){
                d = this.data[d];

                var node = {
                  id: d.id,
                  radius: radius_scale(parseInt(d.total_amount)),
                  value: d.total_amount,
                  name: d.grant_title,
                  org: d.organization,
                  group: d.group,
                  year: d.start_year,
                  x: Math.random() * 900,
                  y: Math.random() * 800
                };

                nodes.push(node);
            }


            nodes.sort(function(a,b){
                return b.value - a.value;
            });

            console.log(nodes);

            vis = d3.select(div).append("svg").attr("width", this.width).attr("height", this.height).attr("id", "svg_vis");
            circles = vis.selectAll("circle")
                        .data(nodes, function(d) {
                          return d.id;
                        })
                        .enter().append("circle")
                            .attr("r", 0)
                            .attr("fill", function() {
                              return function(d) {
                                return fill_color(d.group);
                              };
                            })
                            .attr("stroke-width", 2)
                            .attr("stroke", function() {
                              return function(d) {
                                console.log("circles entered");
                                return d3.rgb(fill_color(d.group)).darker();
                                }
                            })
                            .attr("id", function(d) {
                              return "bubble_" + d.id;
                            });
                function charge(d){
                                return -Math.pow(d.radius, 2.0) / 8;
                            };


                function move_towards_center(alpha){
                    return (function() {
                      return function(d) {
                        console.log(d.x);
                        d.x = d.x + (center.x - d.x) * (damper + 0.02) * alpha;
                        console.log(d.x);
                        return d.y = d.y + (center.y - d.y) * (damper + 0.02) * alpha;
                      };
                    });
                }
                force = d3.layout.force()
                          .nodes(nodes)
                          .size([this.width, this.height])
                          .gravity(layout_gravity)
                          .charge(charge(d))
                          .friction(0.9)
                          .on("tick", function() {
                              return function(e) {

                                return circles.each(move_towards_center(e.alpha))
                                            .attr("cx", function(d) {

                                                return d.x;
                                            })
                                            .attr("cy", function(d) {
                                                return d.y;
                                            });
                            };
                        });
                force.start() //x, y are correctly set when this line is commented out but then force layout is not displayed
                function display_group_all(){
                        force.gravity(layout_gravity)
                         .charge(charge(d))
                         .friction(0.9)
                         .on("tick", (function() {
                              return function(e) {

                                return circles.each(move_towards_center(e.alpha))
                                            .attr("cx", function(d) {

                                                return d.x;
                                            })
                                            .attr("cy", function(d) {
                                                return d.y;
                                            });
                            };
                        })());
                        force.start();
                }
        }   
        if(this.data.length) this.generate();
        else AJAX(options.data, this);

    }
    return Bubble_Force;
})();

}).call(this);

执行以下代码片段时x,和的值为yNaN.

var d;
            for(d in this.data){
                d = this.data[d];
                //console.log(d);
                var node = {
                  id: d.id,
                  radius: radius_scale(parseInt(d.total_amount)),
                  value: d.total_amount,
                  name: d.grant_title,
                  org: d.organization,
                  group: d.group,
                  year: d.start_year,
                  x: Math.random() * 900,    //setting x to NaN
                  y: Math.random() * 800     //setting y to NaN
                };
                //console.log(node);
                nodes.push(node);
            }


            nodes.sort(function(a,b){
                return b.value - a.value;
            });

            console.log(nodes);

我试图给x和y一些硬编码值,但他们仍然被设置为NaN.我究竟做错了什么？

编辑:注释掉force.start()解决了NaN问题,但没有显示任何内容.