在HTML中使用D3提取指定时段客流数据并绘制柱状图的实现方法

核心问题答复 #

可以实现指定范围的时段数据提取，不需要依赖D3特殊API，在D3加载完原始数据后用原生JS做字段筛选求和即可，可直接和现有绘图逻辑结合。

前置注意事项 #

你提供的原始客流数据为JSON格式，现有代码中使用的d3.csv()是CSV文件读取方法，需要先替换为d3.json()适配数据格式。

具体实现步骤 #

1. 新增时段客流计算逻辑
   针对你的数据字段格式（${小时数}passenger），编写通用的指定时段总客流计算逻辑，传入起始小时、结束小时和单条数据对象，即可返回对应时段的客流总和。
2. 改造原有绘图函数
   给drawBarChart新增时段可选参数，加载数据后先根据传入的时段参数计算每条数据的绘图用客流值，再执行后续的排序、坐标轴适配、矩形绘制逻辑即可。

修改后完整代码示例 #

// 新增参数：startHour、endHour 为可选参数，不传默认展示总客流
function drawBarChart(Num, startHour, endHour) {
    const url = "你的JSON数据地址"
    d3.json(url, function (data) {
        // 数据预处理：计算绘图用的客流值
        const processedData = data.map(item => {
            // 没传时段参数就用原始总客流
            if (startHour === undefined || endHour === undefined) {
                return {...item, showPassenger: item.passenger}
            }
            // 传了时段就计算对应时段的总和
            let total = 0
            for (let h = startHour; h <= endHour; h++) {
                total += Number(item[`${h}passenger`]) || 0
            }
            return {...item, showPassenger: total}
        })
        // 后续逻辑把原来的d.passenger替换为d.showPassenger即可
        processedData.sort(function (a, b) { return b.showPassenger - a.showPassenger; })
        // 修正原代码笔误：原d.bus改为d.name匹配数据字段
        x.domain(processedData.map(function (d) { return d.name; }))
        xAxis.call(d3.axisBottom(x))
        y.domain([0, d3.max(processedData, function (d) { return +d.showPassenger })]);
        yAxis.transition().duration(1000).call(d3.axisLeft(y));
        var u = svg.selectAll("rect").data(processedData);
        u.enter()
            .append("rect")
            .merge(u)
            .transition()
            .duration(1000)
            .attr("x", function (d) { return x(d.name); })
            .attr("y", function (d) { return y(d.showPassenger); })
            .attr("width", x.bandwidth())
            .attr("height", function (d) { return height - y(d.showPassenger); })
            .attr("fill", function (d) {
                if (d.name == Num.toLowerCase()) { return "white"; }
                else return "black";
            })
        u.exit().remove();
    })
}

调用示例 #

如果要展示5~15时的客流数据，直接调用：

drawBarChart('需要高亮的name值', 5, 15)

如果要回到全时段总客流展示，调用：

drawBarChart('需要高亮的name值')

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