这篇博客介绍了如何动态地更改SVG条形图中每个条形的高度，通过将数据点值乘以一个常数进行缩放。还讨论了如何反转SVG元素，使条形图从SVG区域的底部开始向上生长，详细解释了坐标系的原理，并提供了实现这一效果的实操步骤。
动态更改每个条形的高度
介绍
和动态设置 x 值一样，也可以把每个条形的高度设置成数组中数据点的值。
selection.attr("property", (d, i) => {
})
d 是数据点值，i 是数组中数据点的索引。
实操
改变 height 属性的回调函数，让它返回数据值乘以 3 的值。
注意： 记住，把所有数据点乘以相同的常数来对数据进行缩放（就像放大）， 这有利于看清例子中条形数值之间的差异。
1.第一个 rect 的 height 应为 36。
2.第二个 rect 的 height 应为 93。
3.第三个 rect 的 height 应为 66。
4.第四个 rect 的 height 应为 51。
5.第五个 rect 的 height 应为 75。
6.第六个 rect 的 height 应为 54。
7.第七个 rect 的 height 应为 87。
8.第八个
最低0.47元/天 解锁文章
2134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
