[问题]可视化叙事能做成动态排序柱状图吗

[XueMeijing]

关键帧动画可以做成 动态排序柱状图 的效果吗，还是要等时序动画出来才可以

[Aarebecca]

你好，可以参考这个例子 https://observablehq.com/d/e7d1be636e9f1b98

[hustcc]

@Aarebecca 直接官网 demo 中提供一些案例吧，柱形图、散点图~

[Aarebecca]

@Aarebecca 直接官网 demo 中提供一些案例吧，柱形图、散点图~

嗯嗯，后面会在官网案例中添加

[XueMeijing]

试了下有两个不明白的地方想请教一下，
那个例子里两个元素交换位置是可以加各自swap为true，如果多个元素同时交换需要怎么设置呢，.encode('color', 'type')这样会交换位置，但是柱状图颜色没有变。
另外一个就是keyframe里怎么设置横向的柱状图呢, keyframe里面没有 keyframe.coordinate这个属性，在外面设置chart.coordinate({ transform: [{ type: 'transpose' }] });不使用timingKeyframe的是横向的，使用timingKeyframe后又变回竖着的了

可以看到左边三四的位置交换但是颜色没有变化

QQ20230308-172232-HD.mp4

[XueMeijing]

我发现之前的这个issue #3612 里提到的，相同的城市颜色相同，但是官网的demo城市排名改变之后，城市对应的颜色也改变了。而颜色列表一直是按顺序来的，没有发生变化，可以观察一下前面的颜色一直没变

https://antv-g2.gitee.io/zh/examples/case/dynamic#dynamic-bar

QQ20230309-114030-HD.mp4

[pearmini]

1. 元素交互不是通过 swap 去实现的，而是数据驱动的，只要 interval 的 key 绑定为 rank（排行）就可以自动的去交换。
2. 水平条形图需要设置 chart.interval().coordinate({ transform: [{type:'tranpose'}]})。
3. 颜色不一致的解决办法之一：需要自己通过 scale.relations 去维护稳定的映射，参考这个例子。
4. 后面会提供一个叫 timingSequence 的容易来更简单的达到 bar racing 的效果。

[XueMeijing]

感谢回复，5.x的版本根据您的提示颜色映射已经实现了，但是有两个小问题，一个是使用 timingKeyframe 后padding失效了，也找不到appendPadding，官网可以复现 。另外一个是页面尺寸改变的时候会有异常抖动

QQ20230309-181225-HD.mp4

[pearmini]

• padding 这么设置试试？chart.interval().attr('paddingLeft', 60)
• 把 autoFit 去了就不会随着页面改变而改变了？

[XueMeijing]

keyframe.interval().attr('paddingLeft', 60) 有效了。另外autoFit去掉确实没有问题，但是4.x版本的resize的时候是正常的，不过大部分情况应该不影响使用，感谢🙏

[hustcc]

欢迎给 5.0 的设计和功能给点建议，或者加钉钉群。

[pearmini]

keyframe.interval().attr('paddingLeft', 60) 有效了。另外autoFit去掉确实没有问题，但是4.x版本的resize的时候是正常的，不过大部分情况应该不影响使用，感谢🙏

嗯嗯，resize 这个问题确实还是需要解决一下，这个确实也复现了 @Aarebecca

[Aarebecca]

这里应该是传入了多次包围盒信息吧，GUI 这块来看起来行为是正常的

  timeout(() => {
    box.attr('width', 500);
  }, 1000);

  timeout(() => {
    box.attr('width', 300);
  }, 2000);