如何用D3.js打造刷屏级数据可视化案例？

<article>
  <p>本可视化采用D3.js v7最新版本构建，展示2020年主要经济体GDP数据对比，工程师团队通过世界银行公开数据库获取原始数据，经数据清洗后运用以下技术实现：</p>
  <div class="code-section">
    <pre><code>

// 核心数据处理逻辑
const margin = { top:30, right:20, bottom:70, left:100 };
const width = 800 – margin.left – margin.right;
const height = 500 – margin.top – margin.bottom;

const svg = d3.select(“#gdpChart”)
.append(“g”)
.attr(“transform”, translate(${margin.left},${margin.top}));

// 构建比例尺系统
const x = d3.scaleBand()
.range([0, width])
.padding(0.2);

const y = d3.scaleLinear()
.range([height, 0]);

// 数据绑定与可视化渲染
d3.json(“https://api.example.com/gdp2020”).then(data => {
x.domain(data.map(d => d.country));
y.domain([0, d3.max(data, d => d.value)]);

svg.selectAll(“.bar”)
.data(data)
.enter().append(“rect”)
.attr(“class”, “bar”)
.attr(“x”, d => x(d.country))
.attr(“width”, x.bandwidth())
.attr(“y”, d => y(d.value))
.attr(“height”, d => height – y(d.value))
.on(“mouseover”, showTooltip)
.on(“mouseout”, hideTooltip);
});