chart = {
const root = treemap(prepped_tree);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "11px sans-serif");
const shadow = DOM.uid("shadow");
svg
.append("filter")
.attr("id", shadow.id)
.append("feDropShadow")
.attr("flood-opacity", 0.8)
.attr("dx", 0)
.attr("stdDeviation", 1.2);
const nestedTreeData = d3
.nest()
.key(d => d.height)
.entries(root.descendants());
const node = svg
.selectAll("g")
.data(nestedTreeData)
.join("g")
.attr("class", "filterGroup")
.attr("filter", shadow)
.selectAll("g")
.attr("class", d => "groupHeight_" + d.height)
.data(d => d.values)
.join("g")
.attr("class", d => "treeHeight_" + d.height)
.attr("transform", d => `translate(${d.x0},${d.y0})`);
// These are only rectangles
// We create group and start the selection/data join up here
// then we append to the variable labels
const labels = svg
.append("g")
.attr('class', 'nodelabel')
.selectAll("g")
.data(nestedTreeData) // first we start on the highest level up
.join("g")
.attr("class", "labelgroup")
.selectAll("g")
.data(d => d.values) //
.join("g")
.attr("class", d => "treeHeight_" + d.height)
.attr("transform", d => `translate(${d.x0},${d.y0})`);
const labelHandler = d => {
// Hides the label for individual objects
// and only shows labels for classifications and departments...
mutable inspectData = d;
console.log(d);
if (d.height >= 1) {
return d.data.key;
} else {
return '';
}
};
// assigning it to a mutable makes it possible for us to inspect
mutable inspectSelector = labels
.append("text")
.join("text")
.attr("class", d => "treeHeightLabel_" + d.height)
.attr("y", 11)
.text(d => labelHandler(d));
node.append("title").text(
d =>
`${d
.ancestors()
.reverse()
.map(d => d.data.key)
.join("/")}\n${format(d.data.title)}`
);
node
.append("rect") // for now, filters leaves out of display because too cluttered
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
// ---- Interactivity starts here
.on("mouseover", d => {
mouseoverHelper(d);
console.log('this kid just moused OVER');
})
.on("mouseout", function(d) {
d3.select("#tooltip").remove();
});
node
.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use");
// .attr("xlink:href", d => d.nodeUid.href); this is broken, our data is missing .clipUid
node
.append("text")
.attr("clip-path", d => d.clipUid) // temp
.selectAll("tspan")
.data(d => d)
.join("tspan")
.attr("fill-opacity", (d, i, nodes) =>
i === nodes.length - 1 ? 0.7 : null
)
.text(d => d.data.title);
node
.filter(d => d.children)
.selectAll("tspan")
.attr("dx", 3)
.attr("y", 13);
node
.filter(d => !d.children)
.selectAll("tspan")
.attr("x", 3)
.attr(
"y",
(d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`
);
return svg.node();
}