d3.js中的数据绑定如何工作?

时间:2016-10-14 07:50:14

标签: d3.js

我是d3.js的新手。不幸的是,我不理解它的数据绑定概念。

据我了解,它似乎不是模型视图概念,因此以下内容不适用于d3.js:

我有一个独特的模型对象o,一个视图对象v绑定到o,o中的更改导致v中的自动更新。

示例:o具有属性a,b和c,v是svg圆,o.a绑定到v.x,o.b绑定到v.y,o.c绑定到v.radius;我更改了其中一个值,屏幕上的圆圈(v)会根据o的值自动重绘。

正如我所说,我认为d3.js不是这种情况。但是将数据绑定到DOM对象(称为“选择”:“输入”,“更新”/“退出”)似乎是d3.js的核心概念。

我试着通过阅读文档并查看一些示例“块”来理解这个概念。不幸的是,我在文档中找不到一个简单的完整工作示例,而且块非常令人印象深刻,太复杂/复杂。

所以我的核心问题是:

如何在d3.js中实现非常简单的数据绑定?

更具体的子问题:

关于“更新”:您将如何实现我的示例(一组给定的数据对象,例如一个,已更新)?

关于“输入”和“删除”:当数据对象被添加或删除到集合时,视图如何更新?

1 个答案:

答案 0 :(得分:0)

"自动更新"不可能。因此,每次更改数据时,都必须重新绑定"您的数据到DOM对象。

请参阅我的问题D3.js: Is this good practise for data-DOM-binding?。它包含一个示例网页,正如您所要求的那样。