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

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

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

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

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

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

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

https://user-images.githubusercontent.com/35559153/223673983-2c02413f-04a3-4660-8b87-367937613ec1.mp4

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

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

https://user-images.githubusercontent.com/35559153/223910910-f3444486-e4b6-44e5-b978-a1c2b150b183.mp4

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

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

https://user-images.githubusercontent.com/35559153/223990822-93d5038d-9eee-443a-bd0c-a8b23a6e2d71.mp4

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

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

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

<img src="https://user-images.githubusercontent.com/7856674/224019116-3862266d-c1fd-497c-9bc4-2dddaa31edff.jpeg" width=400 />

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

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

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

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

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