Let's start with the most basic of hierarchical charts -- a tree! Create a new function and fill it with the following:
westerosChart.tree = function Tree(_data) { const data = getMajorHouses(_data); const chart = this.container; const stratify = d3.stratify() .parentId(d => d.fatherLabel) .id(d => d.itemLabel); const root = stratify(data); const layout = d3.tree() .size([ this.innerWidth, this.innerHeight, ]); }
We use our next-to-be-written getMajorHouses() function to filter out characters who don't have a fatherLabel property and whose itemLabel isn't set as anybody's fatherLabel property. We then create a new stratify object and set its parentId() accessor function to each item's fatherLabel and the id() ...