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) {

    // complicated stuff with d I don't want to do twice

    d3.select(this)

       .attr("x", ((zz+i)%4) *20)

       .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) {

  d.complexValue = ((zz + i) % 4) * 20;

})

.attr("x", function(d) {

  return d.complexValue;

})

//etc...

这是一个演示：

const sel = d3.select("svg")

  .selectAll(null)

  .data([{

    color: "red"

  }, {

    color: "blue"

  }, {

    color: "green"

  }, {

    color: "yellow"

  }])

  .enter()

  .append("rect")

  .attr("width", 30)

  .attr("height", 30)

  .attr("x", function(d, i) {

    return i * 20;

  })

  .attr("y", function(d, i) {

    return i * 40;

  })

  .style("fill", function(d) {

    return d.color;

  });

let zz = 0;

function each() {

  zz++;

  d3.selectAll("rect")

    .transition()

    .duration(1000)

    .each(function(d, i) {

      d.complexValue = ((zz + i) % 4) * 20;

    })

    .attr("x", function(d) {

      return d.complexValue;

    })

    .attr("y", function(d) {

      return d.complexValue;

    })

};

<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>