本文档旨在指导开发者如何使用 D3.js 结合 `join`, `enter`, `update`, `exit` 模式，实现一个通过 HTML 下拉菜单选择数据，并动态更新图表的交互式可视化效果。重点在于监听下拉菜单的 `change` 事件，并将选择的值传递给更新图表的函数，从而实现图表的动态刷新。
实现步骤
1. 数据准备
首先，需要准备用于生成图表的数据。以下代码生成一个包含年份、名称、排名和值的源数据 src。这个数据将用于后续的图表绘制和更新。
//desired permutation length
const length = 4;
//build array from the above length
const perm = Array.from(Array(length).keys()).map((d) => d + 1);
//generate corresponding alphabets for name
const name = perm.map((x) => String.fromCharCode(x - 1 + 65));
//permutation function - https://stackoverflow.com/questions/9960908/permutations-in-javascript/24622772#24622772
function permute(permutation) {
var length = permutation.length,
result = [permutation.slice()],
c = new Array(length).fill(0),
i = 1,
k, p;
while (i < length) {
if (c[i] < i) {
k = i % 2 && c[i];
p = permutation[i];
permutation[i] = permutation[k];
permutation[k] = p;
++c[i];
i = 1;
result.push(permutation.slice());
} else {
c[i] = 0;
++i;
}
}
return result;
};
//generate permutations
const permut = permute(perm);
//generate year based on permutation
const year = permut.map((x, i) => i + 2000);
//generate a yearly constant based on year to generate final value as per the rank {year-name}
const constant = year.map(d => Math.round(d * Math.random()));
const src =
year.map((y, i) => {
return name.map((d, j) => {
return {
Name: d,
Year: y,
Rank: permut[i][j],
Const: constant[i],
Value: Math.round(constant[i] / permut[i][j])
};
});
}).flat();2. 创建 HTML 下拉菜单
使用 D3.js 创建一个 HTML 下拉菜单，并使用年份数据填充选项。关键在于为下拉菜单添加 change 事件监听器，以便在用户选择不同年份时触发图表更新。
const select = d3.select('body')
.append('div', 'dropdown')
.style('position', 'absolute')
.style('top', '400px')
.append('select')
.attr('name', 'input')
.classed('Year', true);
select.selectAll('option')
.data(year)
.enter()
.append('option')
.text((d) => d)
.attr("value", (d) => d)
select.on("change", event => {
const filterYr = +event.currentTarget.value;
draw(filterYr);
});注意:
- select.on("change", ...) 用于监听下拉菜单的 change 事件。
- event.currentTarget.value 获取当前选中的年份值。
- draw(filterYr) 调用图表绘制函数，并将选中的年份作为参数传递。
3. 创建 SVG 画布
创建一个 SVG 元素，用于绘制图表。设置 SVG 的 viewBox 属性，使其具有响应式特性。
//namespace
//define dimension
const width = 1536;
const height = 720;
const svgns = "http://www.w3.org/2000/svg";
const svg = d3.select("svg");
svg.attr("xmlns", svgns).attr("viewBox", `0 0 ${width} ${height}`);
svg
.append("rect")
.attr("class", "vBoxRect")
.attr("width", `${width}`)
.attr("height", `${height}`)
.attr("stroke", "black")
.attr("fill", "white");
//create bound element
const bound = svg
.append("g")
.attr("class", "bound")
.style("transform", `translate(${padding.left}px,${padding.top}px)`);
const g = bound.append('g')
.classed('textContainer', true);4. 定义比例尺
定义比例尺，将数据映射到 SVG 坐标。根据实际需求选择合适的比例尺类型（如线性比例尺、时间比例尺等）。
const xAccessor = (d) => d.Year;
const yAccessor = (d) => d.Value;
const scaleX = d3
.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(data, xAccessor));
const scaleY = d3
.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(data, yAccessor));5. 绘制图表并实现动态更新
使用 D3.js 的 join, enter, update, exit 模式，根据选定的年份数据绘制图表。在 draw() 函数中，首先过滤数据，然后使用 selectAll().data().join() 方法更新图表元素。
function draw(filterYr) {
// filter data as per dropdown
const data = src.filter(a => a.Year == filterYr);
const scaleX = d3
.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(data, xAccessor));
const scaleY = d3
.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(data, yAccessor));
g.selectAll('text')
.data(data)
.join(
enter => enter.append('text')
.attr('x', (d, i) => scaleX(d.Year))
.attr('y', (d, i) => i)
.attr('dy', (d, i) => i * 30)
.text((d) => d.Year + '-------' + d.Value.toLocaleString())
.style("fill", "blue"),
update =>
update
.transition()
.duration(500)
.attr('x', (d, i) => scaleX(d.Year))
.attr('y', (d, i) => i)
.attr('dy', (d, i) => i * 30)
.text((d) => d.Year + '-------' + d.Value.toLocaleString())
.style("fill", "red")
)
}
draw(filterYr);关键点:
- data(data) 将过滤后的数据绑定到 text 元素。
- join(enter, update, exit) 处理数据的进入、更新和退出状态。
- enter 选择添加新的 text 元素。
- update 选择更新已存在的 text 元素。
- exit 选择移除不再需要的 text 元素。
完整代码示例
D3.js Dropdown Update
总结
通过以上步骤，可以实现一个基于 D3.js 的、能够根据下拉菜单选择动态更新的图表。 核心在于监听下拉菜单的 change 事件，并利用 join, enter, update, exit 模式高效地更新图表元素。 在实际应用中，可以根据具体需求调整数据处理、比例尺和图表类型的实现方式。
