d3 中的 Transition.each 不插入属性

Question

我在这里的理解中遗漏了一些东西，而不是我认为的错误......

在 d3 中，我试图在转换中更新多个属性值。使用多个transition.attr声明效果很好。但我想.each在现实世界中使用我有一个很大的计算我不想做两次或更多......我试过使用transition.each但属性值不插值。

是d3.select在里面吗each？我试过了d3.active，但那没有做任何事情。

（提供了一个https://github.com/d3/d3-selection-multi库，它.attrs在 v5 之前运行良好，但不适用于新的 v6 ...）

请参阅https://jsfiddle.net/f679a4yj/3/ - 我可以做些什么来获得动画但是通过.each，我没有得到什么？

Answer 1

这里的问题是关于transition.each: 你不能用它来包装几个transition.attr或transition.style方法的误解。事实上，它仅用于对该转换中的每个元素调用任意代码，就像selection.each.因此，当你做....each (function (d, i) {&nbsp; &nbsp; // complicated stuff with d I don't want to do twice&nbsp; &nbsp; d3.select(this)&nbsp; &nbsp; &nbsp; &nbsp;.attr("x", ((zz+i)%4) *20)&nbsp; &nbsp; &nbsp; &nbsp;.attr("y", ((zz+i)%4) *40)})...您只需更改 DOM 元素中的属性，该元素将立即跳转到新的x位置y，如预期的那样。换句话说，d3.select(this).attr(...您的代码中的那个是一个selection.attr，而不是一个transition.attr.您有多种选择（用于避免冗余的复杂计算）。如果你想坚持使用transition.each，你可以用它来创建一个新的局部变量，或者一个新的属性。为此，我们需要将对象作为数组中的数据元素，然后我们照常使用transition.attr：.each(function(d, i) {&nbsp; d.complexValue = ((zz + i) % 4) * 20;}).attr("x", function(d) {&nbsp; return d.complexValue;})//etc...这是一个演示：const sel = d3.select("svg")&nbsp; .selectAll(null)&nbsp; .data([{&nbsp; &nbsp; color: "red"&nbsp; }, {&nbsp; &nbsp; color: "blue"&nbsp; }, {&nbsp; &nbsp; color: "green"&nbsp; }, {&nbsp; &nbsp; color: "yellow"&nbsp; }])&nbsp; .enter()&nbsp; .append("rect")&nbsp; .attr("width", 30)&nbsp; .attr("height", 30)&nbsp; .attr("x", function(d, i) {&nbsp; &nbsp; return i * 20;&nbsp; })&nbsp; .attr("y", function(d, i) {&nbsp; &nbsp; return i * 40;&nbsp; })&nbsp; .style("fill", function(d) {&nbsp; &nbsp; return d.color;&nbsp; });let zz = 0;function each() {&nbsp; zz++;&nbsp; d3.selectAll("rect")&nbsp; &nbsp; .transition()&nbsp; &nbsp; .duration(1000)&nbsp; &nbsp; .each(function(d, i) {&nbsp; &nbsp; &nbsp; d.complexValue = ((zz + i) % 4) * 20;&nbsp; &nbsp; })&nbsp; &nbsp; .attr("x", function(d) {&nbsp; &nbsp; &nbsp; return d.complexValue;&nbsp; &nbsp; })&nbsp; &nbsp; .attr("y", function(d) {&nbsp; &nbsp; &nbsp; return d.complexValue;&nbsp; &nbsp; })};<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="demo"><svg width="360px"></svg></div><button onclick="each()">In an Each</button>