angular - d3 - การสร้าง lookup ด้วย nest/group

โดยใช้ไลบรารี d3.js ฉันต้องการสร้างการค้นหาแบบนี้:

var lookup = d3.nest()
  .key((d: any) => d.day)
  .rollup((leaves: any) => {
    return d3.sum(leaves, (d: any) => { return parseInt(d.count); }) as any;
  })
  .object(dateData);

เพื่อที่ฉันจะได้ใช้มันในภายหลัง:

rect.filter(function (d) { return d in lookup; })
  .style("fill", function (d) { return d3.interpolatePuBu(scale(lookup[d])); })
  .select("title")
  .text((d) => this.titleFormat(new Date(d)) + ":  " + lookup[d]);

น่าเสียดายที่สิ่งนี้ได้ทำให้เกิด:

"export 'nest' (imported as 'd3') was not found in 'd3'

หลังจากค้นหามานานฉันพบว่ามาใน v4 ของ d3 ซึ่งฉันกำลังใช้ nest ถูกแทนที่ด้วย group ตอนนี้ฉันไม่พบข้อมูลอะไรในเอกสารและฉันกำลังพยายามทำสิ่งที่คล้ายกันกับ:

var lookup = d3.group(data, (d: any) => d.day)
  .rollup((leaves: any) => {
    return d3.sum(leaves, (d: any) => { return parseInt(d.count); }) as any;
  })
  .object(dateData);

แต่สิ่งนี้ดูเหมือนจะยังคอมไพล์ไม่ได้ด้วยซ้ำ ฉันจะทำอย่างไรเพื่อให้บรรลุสิ่งที่ฉันพยายามทำ?

คำตอบ #1

ดังนั้นคำถามของคุณคือวิธีการได้ผลลัพธ์ที่คล้ายกับด้านล่างนี้ แต่ใน d3 v4

var dateData = [
  { day: 1, count: 2 },
  { day: 1, count: 3 },
  { day: 1, count: 4 },
  { day: 2, count: 2 },
  { day: 4, count: 1 },
  { day: 5, count: 0 },
];
var lookup = d3.nest()
  .key((d) => d.day)
  .rollup((leaves) => d3.sum(leaves, (d) => parseInt(d.count)))
  .entries(dateData);
console.log(lookup);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

โปรดทราบว่ามีวิธีแก้ปัญหาแบบ ES6 ล้วนที่ใช้งานได้ดี

var dateData = [
  { day: 1, count: 2 },
  { day: 1, count: 3 },
  { day: 1, count: 4 },
  { day: 2, count: 2 },
  { day: 4, count: 1 },
  { day: 5, count: 0 },
];

// First, map it to a { [day]: [sum counts] } structure
// { "1": 9, "2": 2, "4": 1, "5": 0 }
var lookup = dateData.reduce((obj, { day, count }) => {
    // || 0 means that if the value is undefined, it will use 0 instead
    obj[day] = (obj[day] || 0) + parseInt(count);
    return obj;
  }, {});

// Secondly (if you want), map it to a the same structure as the v3 example
lookup = Object.entries(lookup)
  .map(([key, values]) => ({ key, values }));

console.log(lookup);