应用于不可插值属性值的补间工厂返回函数

这个问题建立在这个问题的(正确的)答案之上。我就是没法再往前走了。

在interpolator函数的帮助下，d3.js的tween允许在现有和新的(即要设置的)DOM元素值之间进行平滑的图形转换。在最简单的层次上，对于一个给定的动画，我们有一个目标元素，一个开始状态，一个结束状态，一个过渡，一个补间函数和一个插值器。

现在，假设我想经常以编程方式更新输入(文本字段)元素的内容。要输入的值是不可插入的(要么提交文本，要么不提交文本)。没有中间状态)。通过提供闭包(允许在预定的转换时间进行文本检索)，tween似乎是更新的良好载体。要么我用固定值替换插值器，确保开始值和结束值相同，要么找到其他方法迫使它在t=1时触发。这就是理论。

为此，在我的例子中，每个属性(不是值)都在它自己的更新调用中被修改，其中传递了过渡，元素索引和父元素选择。

第一个削减:

一个外部的，'控制'的转换，延迟值交错使用当前元素的索引的倍数

    playback_transition = d3.transition()
    .delay(function(d, i,  j) {
        return (time_interval * i);
    })
    .duration(function() {
        return 1; // the minimum
    });

在调用playback_transition.each()时通过update()接口将过渡作为参数传递给依赖动画

在这个依赖动画中，对当前元素应用过渡和渐变:

    input                        // a UI dialog element
    .transition()
    .tween(i.toString(), setChordname( waveplot.chordname ));

地点:

        function setChordname(newValue) {
            return function() {
                var i = newValue;            // a string
                return function(t) {
                    this.value =  i;
                    inputChanged.call(this);
                };
            };
        };

和

        function inputChanged() {
          if (!this.value) return;
          try {
            var chord = chordify.chordObjFromChordName(this.value);
            purge();                         // rid display of superceded elements
            plotChord(chord, options);       // calculate & draw chord using new input property
          } catch (e) {
            console.log(e.toString());
          }
        }

虽然setChordname总是触发(每个和弦依次被正确找到并存储其值)，但在计划返回的函数中，只有第一个触发并显示相关波形。对于所有随后出现的返回函数，就好像它们从未被调度过一样。

From display:

直接用户更新输入字段仍然工作良好
只触发setChordname的第一个返回函数，但是，对于这个初始和弦，执行正确，正确显示相关和弦和音符波的集群。

由此，我们可以说问题与波形绘制函数的完整性无关。

和弦供应都很好
关联(即初始)间火灾在t=1。(具体来说，渐变似乎接受了插值函数的遗漏)。
查看transform . tosource()的输出，尽管相关的外部索引以单个数字的跳跃增加，但tween本身总是与一对空花括号配对。
```
    transition = [[{__transition__:{8:{tween:{}, time:1407355314749, eas..
```

目前，除了这个和初始执行之外，tween factory返回函数的行为是一个谜。

从实验

以下两项都没有影响:

延长初始过渡生效前的时间
延长(倍数)每个交错转换延迟

此外

在不同的场景中使用相同的转换配置可以正常工作。

这些似乎消除了时间问题作为一个可能的原因，留下更多的焦点在补间设置的完整性，或周围的波图附加/删除条件。

害怕它可能会干扰通过渐变的输入属性文本提交，我还尝试禁用并行事件侦听器(侦听'change'事件，触发对inputChanged()的调用)。除了不能再手动输入自己的和弦名之外，没有影响。

除了"改变"，我还尝试了各种各样的活动。类型("提交"，"输入"，"点击"等)。没有改进。

一个最重要的线索是(在我看来)只有第一个 setChordname()返回函数被执行。这表明一些使用间的基本规则正在被打破。最有可能的情况似乎是，tween **的返回值必须是一个插值器。

3个相关问题，欢迎解答:

在这种方法中有明显错误的吗?
对于这样的共享转换场景，您是否看到比使用tween更好的方法来转换不可插入的(通常是用户提供的)输入属性 ?
如果它们在时间上是交错的，可以在同一元素上安排多个转换 -但是多个渐变呢?在这里，由于交错转换/间组合仅对一个元素进行操作，它们似乎可能在每次调用中传递相同的数据(d)和索引(i)。影响?

我现在可以回答我自己的问题了。不要被开头的几段吓到:后面还有一些有价值的教训。

好吧，在我采用原始代码的过程中，有一两个琐碎的dom到d3的重做问题。此外，一个额外的返回函数构造设法找到了这样的方法:

    function setChordname(newValue) {
        return function() {              <--- Nasty..
            var i = newValue;
            return function(t) {
                this.value =  i;
                inputChanged.call(this);
            };
        };
    };

应该是:

    function setChordname(newValue) {
        var i = newValue;
        return function(t) {
            this.value =  i;
            inputChanged.call(this);
        };
    };

然而，最根本的问题是转换——作为参数传递给update()函数——在这种情况下似乎被阻止或忽略了。

最初(如问题中所述)定义为:

input                        // a UI dialog element
.transition()
.tween(i.toString(), setChordname( waveplot.chordname ));

. .但是应该定义为:

transition
.select("#chordinput")       // id attribute of the input element
.tween(i.toString(), setChordname( waveplot.chordname ));

我的猜测是，第一个版本尝试创建一个新的转换(没有定义延迟或持续时间)，而第二个版本使用通过update()接口传入的转换。

奇怪的是:

在另一个依赖动画中工作的东西在这个中不起作用。

只是为了圆满这个主题，我可以指出以下(基于事件的)方法似乎与上面记录的不可插入值的渐变变体一样有效。我可以在两者之间自由切换，产生的动画没有明显的区别:

transition
.select("#chordinput")       // id attribute of the input element
.each("start", setChordname( waveplot.chordname ));

暴徒

相关内容

最新更新

热门标签：