Question

所以我试过

        @table =    d3.select("#search-results-area").append("table").attr("id","resultsTable").attr("class","visualization-panel")
        @thead = @table.append("thead")
        @tbody = @table.append("tbody")
        @thead.append("tr").selectAll("th").data(@columns).enter().append("th").text((col)-> return col).on("click",(d)=>@tbody.selectAll("tr").sort(@sortingFunctionManager[d]))
        @tbody.selectAll("tr").attr("class","spacing center-text")
            console.log "tbody"
       console.log 
       @rows = @tbody.selectAll("tr").data(@collection.models).append("tr")
       console.log @rows
       console.log @collection.models
       cells = @rows.selectAll("td").data((model)=>
       console.log "inside callback"
       console.log model
        return @columns.map((column)=>
            return { column : column, val : model.get(column)}
            )
        ).enter().append("td").text((d)=> 
            console.log "what is d"
            console.log d
            for column in @columns
                if d.column == column
                    return d.val
        )

细胞不会附加。事实上，没有trs

Answer 1

在d3中，当您使用.data绑定数据集时，数据会与您绑定的DOM中的节点进行交叉关联，最终会得到3个组：

.enter()组，表示数据集中没有DOM中相应节点的新元素

.exit()组，表示DOM中没有数据集中相应元素的元素

以及其他所有内容 - 表示数据集中DO中具有相应元素的元素。

在您的情况下，您需要对.enter()元素 - 新数据进行操作，并告诉d3在DOM中为这些项生成新节点。

在2D表格中，您需要执行两次操作 - 每个新模型生成一次，一次生成模型（对于每一行）的每个新属性，代表一个TD单元格。

对于行，它看起来像这样：

var rows = tbody.selectAll("tr")
    // The function returns an identity value for the model
    //   - otherwise its just correlated by position
    .data(myCol.models,function(d){return d.cid})
    // Ok, for any new models, add a TR to the table
    .enter()
        .append("tr");

表示数据单元格：

var cell = rows.selectAll("td")
    // D3 is expecting an array of values, you'll probably want to 
    //  generate this using your "columns" array
    //  the data value (d) is the Backbone model bound to each row
    .data(function(d) { return [d.get('id'),d.get('name')] })
    // For each property ([id, name])append a TD cell
    .enter().append("td")
        .text(function(d) { return d; });

希望这可以让你开始。

这是一个有效的jsFiddle，它显示了这种行为（以及更多）：

http://jsfiddle.net/3SgnA/2/

将d3表绑定到Backbone集合

1 个答案: