绘制引人注目的 SVG 图表：使用 JS 动态更改条形高度和反转元素

2023-11-20 19:19:03

动态 SVG 图表：探索条形高度和元素反转的艺术

在信息爆炸的时代，数据可视化已经成为有效沟通和明智决策的基石。SVG（可缩放矢量图形）凭借其无与伦比的可扩展性和交互性，已成为绘制引人入胜图表的不二之选。本文将深入探讨使用 JavaScript 动态更改 SVG 图表中每个条形高度和反转元素的精妙技巧。

动态调整条形高度：让数据在视觉上腾飞

动态更改条形高度赋予您将数据点值转化为具有不同高度的条形的非凡能力。这种方法对于展示随着时间或其他变量而波动的动态数据至关重要。

要驾驭这项技术，请遵循以下步骤：

获取数据： 从数据源（例如数组或 JSON 对象）中提取您要可视化的数据。
构建 SVG： 利用 JavaScript 的 SVGElement 对象创建 SVG 元素。
绘制条形： 使用 rect 元素绘制条形。将 height 属性设置为数据点值乘以缩放因子，确保高度与图表大小成正比。
实时更新： 当数据发生变化时，只需调整 height 属性即可更新条形的高度，让您的可视化始终保持最新。

反转 SVG 元素：增添交互的魔力

反转 SVG 元素是一种创造交互式效果的巧妙手段，例如在用户悬停时突出显示或隐藏元素。要实现这一效果，可以使用 classList.toggle() 方法添加或删除 CSS 类。

具体步骤如下：

定义 CSS 类： 为要反转的元素创建 CSS 类，例如 .inverted。
设置事件监听器： 在元素上添加事件监听器（例如 mouseover 或 click），以便在触发事件时触发反转效果。
切换 CSS 类： 通过使用 classList.toggle() 方法添加或删除 .inverted 类，实现元素外观的反转。

示例代码：将理论化为现实

以下代码示例将演示如何动态更改 SVG 图表中每个条形的高度并反转元素：

const data = [10, 20, 30, 40, 50]; // 数据点数组

// 获取 SVG 元素
const svg = document.querySelector('svg');

// 绘制条形
const bars = svg.querySelectorAll('rect');
bars.forEach((bar, i) => {
  bar.setAttribute('height', data[i] * 10);
});

// 反转条形
bars.forEach((bar) => {
  bar.addEventListener('mouseover', () => {
    bar.classList.toggle('inverted');
  });
  bar.addEventListener('mouseout', () => {
    bar.classList.toggle('inverted');
  });
});