在 HTML 中通过 d3 获取部分数据答案

【问题标题】：Get part of data by d3 in HTML在 HTML 中通过 d3 获取部分数据
【发布时间】：2021-08-24 17:10:41
【问题描述】：

[
 {
   "name": "000",
   "0passenger": 15,
   "1passenger": 17,
   "2passenger": 1,
   "3passenger": 0,
   "4passenger": 74,
   "5passenger": 35,
   "6passenger": 83,
   "7passenger": 179,
   "8passenger": 278,
   "9passenger": 156,
   "10passenger": 171,
   "11passenger": 9330,
   "12passenger": 162,
   "13passenger": 189,
   "14passenger": 121,
   "15passenger": 106,
   "16passenger": 101,
   "17passenger": 194,
   "18passenger": 233,
   "19passenger": 151,
   "20passenger": 112,
   "21passenger": 18,
   "22passenger": 133,
   "23passenger": 63,
   "passenger": 256404
 },
 {
   "name": "111",
   "0passenger": 17,
   "1passenger": 0,
   "2passenger": 0,
   "3passenger": 0,
   "4passenger": 23,
   "5passenger": 16,
   "6passenger": 29,
   "7passenger": 34,
   "8passenger": 97,
   "9passenger": 62,
   "10passenger": 91,
   "11passenger": 35,
   "12passenger": 39,
   "13passenger": 48,
   "14passenger": 37,
   "15passenger": 45,
   "16passenger": 55,
   "17passenger": 71,
   "18passenger": 98,
   "19passenger": 51,
   "20passenger": 41,
   "21passenger": 41,
   "22passenger": 49,
   "23passenger": 05,
   "passenger": 94397
 },
 {
   "name": "222",
   "0passenger": 8,
   "1passenger": 0,
   "2passenger": 0,
   "3passenger": 0,
   "4passenger": 37,
   "5passenger": 46,
   "6passenger": 52,
   "7passenger": 145,
   "8passenger": 224,
   "9passenger": 122,
   "10passenger": 57,
   "11passenger": 78,
   "12passenger": 72,
   "13passenger": 76,
   "14passenger": 77,
   "15passenger": 36,
   "16passenger": 247,
   "17passenger": 10,
   "18passenger": 192,
   "19passenger": 126,
   "20passenger": 112,
   "21passenger": 174,
   "22passenger": 152,
   "23passenger": 21,
   "passenger": 203246
 }
]

我有一个像上面这样的乘客数据，我想制作一个条形图，仅显示与该数据中所选时区相对应的结果。在这种情况下，当我通过 d3 获取数据时，有没有办法只获取部分数据，例如获取 5~15 的数据？这是绘制显示“乘客”数据的条形图的代码。如何连接这些？

    function drawBarChart(Num) {
            url = (data address)
  
        d3.csv(url, function (data) {
            data.sort(function (a, b) { return b.passenger - a.passenger; })
    
            x.domain(data.map(function (d) { return d.bus; }))
            xAxis.call(d3.axisBottom(x))
    
            y.domain([0, d3.max(data, function (d) { return +d.passenger })]);
            yAxis.transition().duration(1000).call(d3.axisLeft(y));
    
            var u = svg.selectAll("rect").data(data);
    
            u.enter()
                .append("rect")
                .merge(u)
                .transition()
                .duration(1000)
                .attr("x", function (d) { return x(d.name); })
                .attr("y", function (d) { return y(d.passenger); })
                .attr("width", x.bandwidth())
                .attr("height", function (d) { return height - y(d.passenger); })
                .attr("fill", function (d) {
                    if (d.name == Num.toLowerCase()) { return "white"; }
                    else return "black";
                })
            u.exit().remove();
        })
    }

【问题讨论】：

标签： html json d3.js

【解决方案1】：

将您每小时的数据聚合到一个数组byHour 并通过slice 提取相关时间范围：

const grouped = data.map(item => {
  const byHour = Array(24).fill(0).map((_, i) => item[`${i}passenger`] || 0);
  return {name: item.name, total: item.passenger, byHour};
});

const getRange = (fromHour, toHour) => 
  grouped.map(item => ({...item, byHour: item.byHour.slice(fromHour, toHour)}));

【讨论】：