我正在尝试以编程方式将行“添加”到我使用 d3 创建的表中。
@appendLine line for line in arr
appendSingleColLine:(line)->
newModel = new PhoenixModel()
newModel.set({logLine : line})
view = new RowView({model:newModel})
view.render()
class RowView extends Backbone.View
el : "tr"
row : {}
columns : {}
line : {}
tbody : {}
render:()->
#console.log "in render"
@line = @options.model.get("logLine")
@columns = @options.columns
@tbody = @options.tbody
@row = @tbody.selectAll('tr').data(@line).enter().append("tr")
console.log "checking row"
console.log @line
console.log @row
@row.selectAll("td").data(@line).enter().append("td").text((d)->
return d
)
这样做的结果是第一个数据被输入了三次。当我查看@row时,数组中的条目都是空的,这就是为什么我认为我的问题发生了。但是,我不知道为什么会发生这种情况,因为我认为我正在绑定(bind)新数据。
发生什么事了?
最佳答案
很难说清楚到底发生了什么。 jsfiddle 可以提供帮助。我的猜测是问题出在绑定(bind)数据的方式上。您正在构建一个表,这意味着绑定(bind)二维数据,这是一种特殊情况。
查看此处的表格示例:https://github.com/mbostock/d3/wiki/Selections#data 。
请注意第二个 data()
绑定(bind)如何需要使用函数。这很可能就是问题所在。
与 d3 或您的问题无关,但仅用于样式:@options.model
可以直接替换为 @model
,Backbone 会自动为您设置。
关于javascript - D3.js 表附加相同的数据值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17307381/