d3.js输入()update()exit()模式,但使用键值对的自定义比较

时间:2015-07-16 04:14:08

标签: object design-patterns d3.js

是否有某种方法可以强制d3.js进入/更新/退出(EUE)模式以允许比较 - 除了原始数据类型 - 任意键/值对?如果是这样,怎么样?

我想到了对象的比较,如当前值,如{part:0,d​​uration:2} vs之前的值{part:0,d​​uration:0},在可能的比较函数中表示为d.duration ,d.part,d.whatever)。

为了让您知道我在追求的是什么,想象阵列是基于时间序列的垂直选择,典型场景可能(在时间分区10和12):

    ----[10]-- sampling interval=2 --[12]-----
         :                            :
      prev_array                  curr_array
         :                            :
         :  /other data               :  /other data undefined
part:   [0] -duration 6 -----------> [0] -duration undefined, as overlap from prev
         :  \     :                   :  \    :
         :                            :
         :  /other data undefined     :  /other data
part:   [1] -duration undefined      [1] -duration 2 (new)
         :  \     :                   :  \    :
         :                            :
         :  /other data               :  /other data undefined
part:   [2] -duration 4 -----------> [2] -duration undefined, as overlap from prev
         :  \     :                   :  \    :
         :                            :
         :  /other data               :  /other data  
part:   [3] -duration 2              [3] -duration 4 (new) 
            \     :                      \    :

先前在嵌套的selection.each()调用中使用逐字段比较的尝试(已在prev_array和curr_array上进行的选择)因返回值范围和/或异步行为的问题而受到限制。因此,我对直接应用EUE模式感兴趣。几个结论:

  • 一旦找到prev和curr数组的差异,我只能对DOM采取行动。
  • 暗示我认为直接作为EUE的一部分进行的比较最好使用比较器函数中的内置或d3数组方法。
  • 如何比较将结果应用于DOM的问题可能会通过下面提到的关键或其他方法来解答。

棘手的语言中的棘手情况,但是由于希望以非常灵活和可重复使用的方式处理可自由插入和高度可配置的SPA动画的时间顺序链式转换。

尽管如此,任何说明类似/相关情况的例子仍然非常受欢迎。

由于

1 个答案:

答案 0 :(得分:4)

最简单的方法是使用data()键功能。如果您阅读API Docs,您会看到第二个参数。

selection.data([values[, key]])

基本上,你可以提供一个函数来生成数据上的密钥,它可以只返回一个ID,或者生成你感兴趣的特定字段的散列。调用它的一个例子是:

selection.data(myData, function(d) { 
    return d.myCustomKey;
});