使用D3.js和Immutable.js

Question

在我的应用程序中,我使用D3.js进行一些可视化.

现在D3使用可变的本机JavaScript数据结构.

因此,一些数据编组对于使用Immutable.js是必要的.

我也使用Reflux和React,所以在我的商店里我管理一个不可变的地图.由于这个Map在每次更改时都会成为新东西,因此我不能将它传递给D3 Force Layout,因为它可以处理可变数据,因此每次从头开始重新计算所有内容.

我最终管理了不可变和可变数据结构,但这感觉非常错误.

我发现了一篇使用D3 + OM的实用时间序列可视化文章,它似乎触及了这个主题并建议使用游标.问题是当我使用JavaScript时它使用Clojure(脚本).

我理解这是非常抽象的没有代码示例,但任何关于工作/同步主题的任何建议将不胜感激和可变数据将不胜感激!

Answer 1

我认为 d3.js 没有理由不能与 immutable.js 一起使用。我认为关键是理解 d3.js 如何处理数据，特别是 d3.js 的数据连接如何工作。

数据连接 - 数据如何绑定到 d3.js 中的 DOM 元素

每次选择 d3.selectAll('div')节点并使用d3.js连接时，.data([1, 3, 5, 9])都会比较现有元素是否div绑定到数据元素。这是通过评估选定的divDOM 节点是否具有__data__关联的属性来完成的。data属性由 d3.js 设置和维护。默认情况下，连接数组中的索引就是进入__data__. 但您也可以定义一个key函数来覆盖此行为。

进一步阅读

选择如何工作，Mike Bostock 解释了 d3.js 如何通过上述数据绑定机制计算输入、更新和退出选择。