如何将D3.js中线条可见性与滑块位置关联？

嘿，我看你现在在尝试用滑块来控制对应年份线条的显示，这个需求挺清晰的，我来帮你一步步搞定它～

首先，咱们得明确核心思路：监听滑块的位置变化，获取当前选中的年份，然后对比每条线条绑定的年份数据，只显示年份匹配的那条，其余隐藏。下面是具体的实现步骤和修改后的代码：

步骤1：给每条线条绑定年份数据 #

在创建线条的代码里，给每个<path>元素添加一个data-year属性，把对应的年份值存进去，这样后面判断的时候就能直接拿到每条线对应的年份了。比如原代码里对应1994年的线条，修改后是这样：

// 给1994年的线条添加data-year属性
svg.append("path")
    .datum(data.filter(d => d.year === 1994))
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("data-year", "1994") // 新增这行，绑定年份
    .attr("d", line);

你需要给另外3条线也做同样的处理，分别添加data-year="1992"、data-year="1996"、data-year="1998"。

步骤2：监听滑块的变化事件 #

接下来，咱们给滑块添加input事件监听（实时响应滑块拖动），在回调里处理线条的显示/隐藏逻辑：

// 获取滑块元素
const slider = document.getElementById("year-slider");

// 监听滑块变化，实时控制线条显示
slider.addEventListener("input", function() {
    const selectedYear = this.value; // 获取当前选中的年份
    // 遍历所有绑定了年份的线条
    document.querySelectorAll("path[data-year]").forEach(line => {
        const lineYear = line.getAttribute("data-year");
        // 年份匹配则显示，否则隐藏
        line.style.display = lineYear === selectedYear ? "block" : "none";
    });
});

步骤3：初始化线条状态 #

页面加载完成后，咱们还要默认显示滑块初始位置对应的线条，比如滑块默认值是1992，那就要默认显示1992的线，其余隐藏：

// 页面加载完成后初始化线条显示状态
window.addEventListener("load", function() {
    const initialYear = slider.value;
    document.querySelectorAll("path[data-year]").forEach(line => {
        line.style.display = line.getAttribute("data-year") === initialYear ? "block" : "none";
    });
});

完整关键代码整合 #

把这些修改整合到你的代码里，核心逻辑部分大概是这样：

// 创建1992年的线条并绑定年份
svg.append("path")
    .datum(data.filter(d => d.year === 1992))
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("data-year", "1992")
    .attr("d", line);

// 创建1994年的线条并绑定年份
svg.append("path")
    .datum(data.filter(d => d.year === 1994))
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("data-year", "1994")
    .attr("d", line);

// 1996、1998年的线条同理，添加对应data-year属性...

// 滑块事件监听
const slider = document.getElementById("year-slider");
slider.addEventListener("input", function() {
    const selectedYear = this.value;
    document.querySelectorAll("path[data-year]").forEach(line => {
        line.style.display = line.getAttribute("data-year") === selectedYear ? "block" : "none";
    });
});

// 初始化显示状态
window.addEventListener("load", function() {
    const initialYear = slider.value;
    document.querySelectorAll("path[data-year]").forEach(line => {
        line.style.display = line.getAttribute("data-year") === initialYear ? "block" : "none";
    });
});

这样一来，当你拖动滑块到某个年份时，只有对应年份的线条会显示，其他线条都会隐藏，完全符合你的需求啦～

内容的提问来源于stack exchange，提问作者dragaaan