-1

所以我试过了

        @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

4

1 回答 1

0

在 d3 中，当您使用 .data 绑定数据集时，数据与您要绑定的 DOM 中的节点相互关联，最终得到 3 个组：

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

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

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

在您的情况下，您需要对.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/

于 2013-07-02T15:05:57.940 回答