Question

尝试根据数据垂直排序svg组。构建一个像这样的数据即可设置初始订单。

// CREATE BOX FOR EACH PLAYER
const boxes = svg.selectAll('g')
    .data(data, d => d.Player)
    .enter().append('g')
       .attr('transform', d => `translate(0,${yScale(d.Player)})`)
       .classed('player', true);

使用viz创建一个很长的组列表，效果很好......

<g transform="translate(0,130.29702970297026)" class="player">...</g>

单击排序按钮以运行此功能，并且属性在检查器中显示为已更改，但该组从未实际移动过。我错过了什么？

function sortPlayers() {
  d3.selectAll('.player')
    .sort((a, b) => {
      const sortKey = 'FG%';
      return a[sortKey] - b[sortKey];
    });

  d3.selectAll('.player')
    .transition()
    .duration(5000)
    .ease(d3.easeLinear)
    .attr('transform', (d) => {
      const targetY = yScale(d.Player);
      // return 'translate(0,500)'; <-- Not what I wanted but worked.
      return `translate(0,${targetY})`;
    });
}

上面在检查器中更新了以下内容，因此它正在排序和更新，而不是动画。

<g transform="translate(0,332.529702970297026)" class="player">...</g>

由于我已将动作移至translate(0,500)，因此我查看d3.interpolateString(x,y)但无法弄清楚如何在其中获取预排序属性。甚至不确定这是否是解决方案。如何使用数据为一系列组的变换转换属性设置动画？

这是Fiddle。

D3 .transition转换不会在排序时更新svg组

0 个答案: