Question

我正在研究一个使用backbone.js来处理wordpress数据的中等复杂应用程序，我无法弄清楚如何让这种力量在骨干布局中运行。

基本上，我正试图在骨干样板布局中实例化一个力布局，如下所示：

myLayout = Backbone.Layout.extend({
    initialize: function() {
        var f = this; // i.e. the layout instance
        f.force = d3.layout.force()
            .nodes(myModels)
            .on("tick", f.tick)
            .gravity(0)
            .friction(0.9)
            .start();

        console.log(f.force);
    },
    tick: function() {
        // stuff to do when the force ticks
    }
});

问题是正在使用所有空白函数定义力，例如gravity: function(x) { //lots of null things here }。我很确定这是一个命名空间问题，但我尝试的任何工作都没有 - 我已经尝试过$(window).force，var force，$this.force ......

在我的示例tick中是唯一的命名空间函数，但我已经尝试与其他所有其他函数（重力，摩擦等）一起使用无效（即使它们应该只是链接到强制对象）。

谁有任何想法？我不能真正发布一个.jsfiddle因为应用程序太复杂了，所以提前抱歉。当前版本为here

编辑：以下是d3如何成功访问模型：

这有效：

myLayout.nodes = myLayout.d3_wrapper.selectAll(".node")
    .data(myModels)
    .enter().append("g").attr("class", "node")
    .attr("x",10)
    .attr("y",10);

    myLayout.nodes.append("clipPath")
        .attr("id", function(d) { return d.get("slug"); })

就像这样： myLayout.nodes.append("clipPath") .attr("id", function(d) { return d.attributes.slug });

编辑：为了清楚起见，这里是非昵称代码：

setforce: function() { // this gets called from the layout's initialize fn
    console.log("setting force");
    var f = this; // the layout
    f.force = d3.layout.force()
        .nodes(Cartofolio.elders.models) // Cartofolio is the module, elders is a Backbone Collection
        .gravity(0)
        .friction(0.9)
        .start();

    console.log(f.force);
}

Answer 1

我会尝试在您的收藏中使用toJSON()，然后再将其传递给d3：

myLayout = Backbone.Layout.extend({
    initialize: function() {
        var f = this; // i.e. the layout instance
        f.force = d3.layout.force()
            .nodes(myModels.toJSON())
            .on("tick", f.tick)
            .gravity(0)
            .friction(0.9)
            .start();

        console.log(f.force);
    },
    tick: function() {
        // stuff to do when the force ticks
    }
});

d3.js在骨干视图中强制布局命名空间

1 个答案: