Javascript 高级D3转换测序；从不同选择的转换中继承延迟/持续时间

我有前n名员工的排名数据，我想用这些数据来推动可视化。我知道，因为显示的员工数量n永远不会改变，如果我使用复合员工+排名键功能更新数据联接，则输入和退出选择应始终包含相同数量的元素，并且每次员工的排名改变时，我都会收到一个退出/进入员工对

现在，我正在尝试为元素的退出和进入设置动画。使用博斯托克先生在《我》中描述的技术，我可以将两个转换链接起来，并将第一个应用于退出选择，第二个应用于进入选择，以对不同选择的转换进行排序

当我试图用子转换来修饰退出转换时，问题就出现了。例如，将退出转换转换为由文本过渡和背景转换组成的两部分链式转换。由于enter转换不知道子转换的数量，也不知道exit转换中的延迟/持续时间，因此我必须手动计算enter转换延迟/持续时间。此外我必须根据数据计算子转换的延迟/持续时间，或者必须假设现有选择中每个元素上的每个转换可能的最长延迟/持续时间，例如，我必须假设每个员工文本之间的子转换是最长的员工姓名之间的转换

既然我有相同数量的退出和进入元素，有没有办法像在相同元素上一样链接转换？也就是说，使用相同的选择，我可以链接转换，以便后续转换继承延迟/持续时间，我可以使用相同大小的不同选择来执行此操作吗？基本上，我如何在不估计延迟/持续时间的情况下编写以下内容

功能图{ 变量标度=d3.标度.顺序范围带[0150]，.5； 返回函数选择{ selection.eachfunctiondata{ scale.domaindata； var svg=d3。选择this.selectAll'svg'。数据[数据]； var svgEnter=svg.enter.append'svg'； var g=svg.selectAll'g'.datafunctiond{ 返回d； }，功能，我{ 返回d+i； }.attr'class'，'update'； var gExit=g.exit； var gEnter=g.enter.append'g'.attr'class'，enter'.attr'transform'，函数d{ 返回“translate150”+缩放+； }; g、 秩序； var gexittransion=d3.transition.eachfunction{ var t0=gExit.transition.delayfunction_ui{ 返回i*100； }.持续时间{ 返回d.长度*250/5； }; var t1=t0.0转变； var t2=t1.0转变； t0.选择“文本”。在“文本”之间选择函数D{ var i=d3.interpolethis.textContent.length，0； 返回函数{ this.textContent=d.slice0，it； }; }; t1.选择'rect'，attr'y'，scale.rangeBand/2.attr'height'，1e-6； t2.移除； }; var gEnterTransition=gExitTransition.transition.eachfunction{ var t0=gEnter.transition.delayfunction_ui{ 返回i*100+500； }; 变量t1=t0.transition.durationfunctiond{ 返回d.长度*250/5； }; var rectEnter=gEnter.append'rect'.attr'y'，scale.rangeBand/2.attr'width'，50.attr'height'，1e-6.style'fill'，rgba0,0,0,1'； t0.选择'rect'。attr'y'，0.attr'height'，scale.rangeBand； var textEnter=gEnter.append'text'.attr'y'，scale.rangeBand/2.style'alignment-baseline'，middle'； t1.选择“文本”。在“文本”之间选择函数D{ 变量i=d3.interpolethis.textContent.length，d.length； 返回函数{ this.textContent=d.slice0，it； }; }; }; }; }; } var alphabet='abcdefghijklmnopqrstuvxyz'.split.mapfunctionc{ 返回d3.rangeMath.floor5*Math.random+1.mapfunction{ 返回c； }.加入； }; var myChart=图表； 变量选择=d3。选择“主体”； 函数f{ F setIntervalf，3000； }作用{ selection.datumd3.shufflealphabet.slice0.slice0，10.sort.callmyChart； };

---

在Gerardo的建议下，我通过切换到v4得到了部分解决方案；它可以工作，避免了在不同的选择中计算时间/持续时间的需要，但我基本上是等待第一个选择上的转换的开始事件，然后过滤第二个选择上的转换，直到元素索引相等为止，这让我感觉非常愚蠢

功能图{ var scale=d3.scaleBand.range[0150]。padding.5； 返回函数选择{ selection.eachfunctiondata{ scale.domaindata； var svg=d3。选择this.selectAll'svg'。数据[数据]； var svgEnte r=svg.enter.append'svg'； svg=svg.mergesvgEnter； var g=svg.selectAll'g'.datafunctiond{ 返回d； }，功能，我{ 返回d+i； }.attr'class'，'update'； var gExit=g.exit.attr'class'，'exit'； var gEnter=g.enter.append'g'.attr'class'，enter'.attr'transform'，函数d{ 返回“translate150”+缩放+； }; g=g.mergenter.order； var recenter=gEnter.append'rect'.attr'y'，scale.bandwidth/2.attr'width'，50.attr'height'，1e-6.style'fill'，rgba0,0,0,1'； var textEnter=gEnter.append'text'.attr'y'，scale.bandwidth/2.样式'alignment-baseline'，middle'； var t0=gExit.transition.delayfunction_ui{ 返回i*100； }; t0.选择“文本”。durationfunctiond{ 返回d.长度*250/5； }.tween'text'，函数{ var i=d3.interpolethis.textContent.length，0； 返回函数{ this.textContent=d.slice0，it； }.这一点； }; var t1=t0.0转变； t1.选择'rect'，attr'y'，scale.bandwidth/2.attr'height'，1e-6； 变量t2=t1。转换。在“开始”时，函数d，i{ var t3=gEnter.transitiond3.activethis.filterfunction_j{ 返回i==j； }; t3.选择'rect'。attr'y'，0.attr'height'，scale.bandwidth； var t4=t3.5转换； t4.选择“文本”。durationfunctiond{ 返回d.长度*250/5； }.tween'text'，函数{ 变量i=d3.interpolethis.textContent.length，d.length； 返回函数{ this.textContent=d.slice0，it； }.这一点； }; }; t2.移除； }; }; } var alphabet='abcdefghijklmnopqrstuvxyz'.split.mapfunctionc{ 返回d3.rangeMath.floor5*Math.random+1.mapfunction{ 返回c； }.加入； }; var myChart=图表； 变量选择=d3。选择“主体”； 函数f{ F d3.间隔，3000； }作用{ selection.datumd3.shufflealphabet.slice0.slice0，10.sort.callmyChart； };

---

考虑将代码升级到D3 v4.x。这将使这项任务更容易。有趣！我没有意识到v4对转换的工作方式进行了任何重大更改。如果我能在任何人加入v3建议之前找到答案，我会尝试一下并发回帖子。这些变化非常重要！有