@springernature/nn-charts
Version:
Visualization for DAS products
684 lines (627 loc) • 32.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var d3 = _interopRequireWildcard(require("d3"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var ZoomableHierarchyTreemapChart = exports["default"] = /*#__PURE__*/function () {
/* constructor(data) { */
function ZoomableHierarchyTreemapChart(data, enableCollaborationChart, language) {
var _this = this;
_classCallCheck(this, ZoomableHierarchyTreemapChart);
// this.data = data; /* ingested data */
this.zoomableHierarchyTreemap = {
updateChart: document.getElementById("updateTreemapChart").addEventListener("click", function () {
d3.select("#updateTreemapChart").classed("disabled", true);
_this.submitNewHierarchy();
}),
proposedHierarchyDefinition: null,
metricToScaleBy: "researchers" /* "researchers" */ /* "articles" */ /* articles_3_years */,
metricToScaleByLU: {
articles_3_years: "articles published in last 3 years",
articles: "articles published in total",
researchers: "researchers"
},
affiliationObject: {},
affiliationList: [],
hierarchyDefinition: ["country_array", "affiliation_array", "year"],
data: data /* ingested data */,
//https://bl.ocks.org/JacquesJahnichen/42afd0cde7cbf72ecb81
//https://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022
//https://gist.github.com/tkafka/6d00c44d5ae52182f548a18e8db44811
margin: {
top: 24,
right: 0,
bottom: 0,
left: 0
},
width: 1600,
//640
height: 800,
formatNumber: d3.format(",d"),
transitioning: null,
color: d3.scaleOrdinal().range(d3.schemeCategory10.map(function (c) {
c = d3.rgb(c);
c.opacity = 0.6;
return c;
})),
//var color = d3.scaleOrdinal(d3.schemeCategory20.map(fader));
fader: function fader(color) {
return d3.interpolateRgb(color, "#fff")(0.2);
},
format: d3.format(",d"),
treemap: null,
svg: null,
grandparent: null
};
} //end constructor
/*
name: init
description: function to
arguments: n/a
returns: n/a
calls: n/a
called from:
*/
return _createClass(ZoomableHierarchyTreemapChart, [{
key: "init",
value: function init(name, id) {
this.zoomableHierarchyTreemap.proposedHierarchyDefinition = this.zoomableHierarchyTreemap.hierarchyDefinition;
this.zoomableHierarchyTreemap.subTopicName = name;
this.zoomableHierarchyTreemap.subTopicID = id;
// this.drawZoomableHierarchyTreemapChart(this.data);
this.nestData();
} // end init
/*
NAME: createNestingFunction
DESCRIPTION: recursive function to build required JSON object
ARGUMENTS TAKEN: propertyName - key name
ARGUMENTS RETURNED: d[propertyName]
CALLED FROM: nestData
CALLS: none
*/
}, {
key: "createNestingFunction",
value: function createNestingFunction(propertyName) {
return function (d) {
return d[propertyName];
};
} // end function createNestingFunction
/*
NAME: submitNewHierarchy
DESCRIPTION: function called to zoom visual to selected circle
ARGUMENTS TAKEN: none
ARGUMENTS RETURNED: none
CALLED FROM: user clicking submit button in index.html
CALLS: nestData
*/
}, {
key: "submitNewHierarchy",
value: function submitNewHierarchy() {
var el = this;
// get user defined values of each level.
// el.hierarchy.hierarchyDefinition = [
// "country_array",
// "affiliation_array",
// "year",
// ];
var level0 = document.getElementById("treemap-level0").value;
var level1 = document.getElementById("treemap-level1").value;
var level2 = document.getElementById("treemap-level2").value;
var level1Select = document.getElementById("treemap-level0");
var level2Select = document.getElementById("treemap-level1");
var level3Select = document.getElementById("treemap-level2");
var level1Text = level1Select.options[level1Select.selectedIndex].text;
var level2Text = level2Select.options[level2Select.selectedIndex].text;
var level3Text = level3Select.options[level3Select.selectedIndex].text;
// update treemap defintion to rebuild new hierarchy visual.
el.zoomableHierarchyTreemap.hierarchyDefinition = [level0, level1, level2];
// update hierarchy defintion to rebuild LEGEND of new hierarchy.
el.zoomableHierarchyTreemap.hierarchyLegendDefinition = [level1Text, level2Text, level3Text];
d3.selectAll(".hierarchyTableDataText").html("");
// document.getElementById("updateChart").disabled = true;
document.getElementById("resetTreemapChart").disabled = false;
d3.select("#resetTreemapChart").classed("disabled", false);
el.zoomableHierarchyTreemap.proposedHierarchyDefinition = el.zoomableHierarchyTreemap.hierarchyDefinition.slice();
el.zoomableHierarchyTreemap.treemap = null;
el.zoomableHierarchyTreemap.svg = null;
el.zoomableHierarchyTreemap.grandparent = null;
d3.selectAll(".treemapSVGContainer").remove();
d3.selectAll(".topicNameBannerlabel").remove();
// call function to nest data for new hierarchy definition.
el.nestData();
return;
} // end function submitNewHierarchy
/*
NAME: nestData
DESCRIPTION: function called to nest ingested data to requsite JSON data strucutre
ARGUMENTS TAKEN: none
ARGUMENTS RETURNED: none
CALLED FROM:
chartDrawFunctionCall
submitNewHierarchy
CALLS:
drawCommunityHierarchyChart - change this ..
createNestingFunction
rename
*/
}, {
key: "nestData",
value: function nestData() {
var el = this;
// added to hide all other visualisation .container DIVs.
// d3.selectAll(".container").classed("hide", true);
// d3.selectAll(".container.hierarchy-container").classed("hide", false);
// d3.selectAll(".hierarchy--master--wrapper").classed("loading", false);
// key-values object to define required JSON object names.
var keys = {
key: "name",
values: "children"
};
/*
NAME: rename
DESCRIPTION: function called to rename JSON object keys to desired names
ARGUMENTS TAKEN: values - key name
ARGUMENTS RETURNED: none
CALLED FROM: itself
CALLS: rename
*/
function rename(value) {
if (!value || _typeof(value) !== "object") {
return value;
}
if (Array.isArray(value)) {
return value.map(rename);
}
// construct data object
var dee = Object.fromEntries(Object.entries(value).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
k = _ref2[0],
v = _ref2[1];
return [keys[k] || k, rename(v)];
}));
/*
{
"researcher_id": "ur.01347172002.68",
"pagerank": 0.000018487321837815568,
"first_name": "Christopher M.",
"last_name": "Kellett",
"affiliation_array": [
"Australian National University"
],
"grid_id_array": [
"grid.1001.0"
],
"country_array": [
"Australia"
],
"country_iso_array": [
"AU"
],
"subtopic": "Engineering",
"subtopic_id": "51",
"F_L0": "Biological Sciences",
"year": 2021,
"articles": 2,
"articles_3_years": 0,
"hindex": 21,
"academic_age": 21
}
*/
//
if (/* !dee.name */dee.researcher_id) {
//
if (dee.affiliation_array.length == 0) {
dee.affiliation_array[0] = "No Affiliated Institutes";
}
if (dee.country_array.length == 0) {
dee.country_array[0] = "No Affiliated Countries";
}
if (dee.F_L0 == null) {
dee.F_L0 = "No Affiliated Field of Research";
}
return {
affiliation: dee.affiliation_array[0],
country: dee.country_array[0],
academic_age: dee.academic_age,
articles: dee.articles,
articles_3_years: dee.articles_3_years,
author: dee.last_name + ", " + dee.first_name,
authorID: dee.authorID,
children: [],
first_name: dee.first_name,
F_L0: dee.F_L0,
hindex: dee.hindex,
last_name: dee.last_name,
name: dee.last_name + ", " + dee.first_name,
firstName_lastName: dee.first_name + " " + dee.last_name,
pagerank: dee.pagerank,
researcher_id: dee.researcher_id,
size: dee.articles,
subtopic: dee.subtopic,
subtopic_id: dee.subtopic_id,
year: dee.year,
researchers: 1
};
} else if (dee.children) {
if (dee.name == "null") {
return {
name: "No Category Assigned",
children: dee.children
};
} else {
return {
shortName: dee.name,
name: dee.name,
children: dee.children
};
}
// return dee;
}
//
else {
return dee;
}
} // end function rename
el.zoomableHierarchyTreemap.filteredData = el.zoomableHierarchyTreemap.data.filter(function (d, i) {
return d.subtopic_id == el.zoomableHierarchyTreemap.subTopicID;
});
// attach proxy author ID to each filtered author relevant to selected sub-topic.
el.zoomableHierarchyTreemap.filteredData.forEach(function (d, i) {
d.authorID = i;
d.fullNameBackward = d.last_name + ", " + d.first_name;
d.fullNameForward = d.first_name + " " + d.last_name;
//
var country_array = d.country_array;
var countries = country_array.toString().split(",").join(" | ");
d.countries = countries;
//
var affiliation_array = d.affiliation_array;
var affiliations = affiliation_array.toString().split(",").join(" | ");
d.affiliation = affiliations;
//
var affiliation = d.affiliation;
if (d.grid_id_array.length == 1 && affiliation != null) {
var grid_id_array = d.grid_id_array.toString().replaceAll(".", "-").replaceAll(",", "-");
if (!el.zoomableHierarchyTreemap.affiliationObject.hasOwnProperty(grid_id_array)) {
el.zoomableHierarchyTreemap.affiliationObject[grid_id_array] = d.affiliation;
el.zoomableHierarchyTreemap.affiliationList.push([grid_id_array, d.affiliation, affiliation.substring(0, 35) + "..."]);
}
}
}); // end forEach...
function compareStrings(a, b) {
// Assuming you want case-insensitive comparison
a = a.toLowerCase();
b = b.toLowerCase();
return a < b ? -1 : a > b ? 1 : 0;
}
el.zoomableHierarchyTreemap.filteredData.sort(function (a, b) {
return compareStrings(a.fullNameBackward, b.fullNameBackward);
});
// https://stackoverflow.com/questions/22512853/d3-js-use-d3-nest-adding-keys-dynamically
el.zoomableHierarchyTreemap.levels = el.zoomableHierarchyTreemap.hierarchyDefinition.map(function (d, i) {
return d;
});
// generate D3 nest object based on data recursion
el.zoomableHierarchyTreemap.nest = d3.nest();
for (var i = 0; i < el.zoomableHierarchyTreemap.levels.length; i++) {
el.zoomableHierarchyTreemap.nest = el.zoomableHierarchyTreemap.nest.key(el.createNestingFunction(el.zoomableHierarchyTreemap.levels[i]));
} // end for ...
// construct updated structure for tree object
el.zoomableHierarchyTreemap.treemapData = {
name: el.zoomableHierarchyTreemap.subTopicName,
shortName: el.zoomableHierarchyTreemap.subTopicName,
children: rename(el.zoomableHierarchyTreemap.nest.entries(el.zoomableHierarchyTreemap.filteredData)) //compute the nest
};
// populte proxy article locator selection list (for testing purposes) with proxy ID data...
el.zoomableHierarchyTreemap.filteredData.forEach(function (d, i) {
d.authorID = +i;
d.author = d.last_name + ", " + d.first_name;
}); // end forEach
// call function to draw Community treemap chart ...
// el.drawCommunityHierarchyChart(el.hierarchy.treemapData);
this.drawZoomableHierarchyTreemapChart(/* this.data */);
return;
} // end function nestData
/*
name: drawZoomableHierarchyTreemapChart
description: main function for building chart
arguments: data -
returns: n/a
calls:
called from: constructor
*/
}, {
key: "drawZoomableHierarchyTreemapChart",
value: function drawZoomableHierarchyTreemapChart() {
var el = this;
//
//
// added to hide all other visualisation .container DIVs.
d3.selectAll(".container").classed("hide", true);
d3.selectAll(".container.topicModelling").classed("hide", false);
d3.selectAll(".container.line-container").classed("hide", false);
// d3.selectAll(".container.zoomable-hierarchy-treemap").classed(
// "hide",
// false
// );
d3.selectAll(".container.treemap-container").classed("hide", false);
//
//
if (el.zoomableHierarchyTreemap.svg) {
el.zoomableHierarchyTreemap.svg.selectAll("*").remove();
} else {
el.zoomableHierarchyTreemap.svg = d3.selectAll(".container.treemap-container").append("svg").attr("class", "treemapSVGContainer").attr("width", el.zoomableHierarchyTreemap.width - el.zoomableHierarchyTreemap.margin.left - el.zoomableHierarchyTreemap.margin.right).attr("height", el.zoomableHierarchyTreemap.height - el.zoomableHierarchyTreemap.margin.bottom - el.zoomableHierarchyTreemap.margin.top).style("margin-left", -el.zoomableHierarchyTreemap.margin.left + "px").style("margin.right", -el.zoomableHierarchyTreemap.margin.right + "px").append("g").attr("class", "treemap-group").attr("transform", "translate(" + el.zoomableHierarchyTreemap.margin.left + "," + el.zoomableHierarchyTreemap.margin.top + ")").style("shape-rendering", "crispEdges");
var treemapHeight = d3.selectAll(".container.treemap-container").style("height").replaceAll("px", "") * 1;
//
var treemapWidth = d3.selectAll(".container.treemap-container").style("width").replaceAll("px", "");
//
el.zoomableHierarchyTreemap.height = treemapHeight * 0.8;
el.zoomableHierarchyTreemap.width = treemapWidth;
el.zoomableHierarchyTreemap.x = d3.scaleLinear().domain([0, el.zoomableHierarchyTreemap.width]).range([0, el.zoomableHierarchyTreemap.width]);
//
el.zoomableHierarchyTreemap.y = d3.scaleLinear().domain([0, el.zoomableHierarchyTreemap.height - el.zoomableHierarchyTreemap.margin.top - el.zoomableHierarchyTreemap.margin.bottom]).range([0, el.zoomableHierarchyTreemap.height - el.zoomableHierarchyTreemap.margin.top - el.zoomableHierarchyTreemap.margin.bottom]);
d3.selectAll(".treemapSVGContainer").attr("width", el.zoomableHierarchyTreemap.width - el.zoomableHierarchyTreemap.margin.left - el.zoomableHierarchyTreemap.margin.right).attr("height", el.zoomableHierarchyTreemap.height - el.zoomableHierarchyTreemap.margin.bottom - el.zoomableHierarchyTreemap.margin.top);
el.zoomableHierarchyTreemap.grandparent = el.zoomableHierarchyTreemap.svg.append("g").attr("class", "grandparent");
el.zoomableHierarchyTreemap.grandparent.append("rect").attr("class", "breadcrumbTrailRect").attr("y", -el.zoomableHierarchyTreemap.margin.top).attr("width", el.zoomableHierarchyTreemap.width).attr("height", el.zoomableHierarchyTreemap.margin.top);
el.zoomableHierarchyTreemap.grandparent.append("text").attr("class", "breadcrumbTrailText").attr("x", 6).attr("y", 6 - el.zoomableHierarchyTreemap.margin.top).attr("dy", ".75em");
// append topic name label
d3.selectAll(".topicNameBanner").append("label").attr("class", "topicNameBannerlabel").text("Treemap Hierarchy for " + el.zoomableHierarchyTreemap.subTopicName);
d3.selectAll(".treemapSVGContainer").attr("width", el.zoomableHierarchyTreemap.width - el.zoomableHierarchyTreemap.margin.left - el.zoomableHierarchyTreemap.margin.right).attr("height", el.zoomableHierarchyTreemap.height - el.zoomableHierarchyTreemap.margin.bottom - el.zoomableHierarchyTreemap.margin.top);
// d3.selectAll(".breadcrumbTrailRect").attr(
// "width",
// el.zoomableHierarchyTreemap.width
// );
el.zoomableHierarchyTreemap.treemap = d3.treemap().tile(d3.treemapResquarify.ratio(el.zoomableHierarchyTreemap.height / el.zoomableHierarchyTreemap.width * /* (treemapHeight / treemapWidth) */0.5 * (1 + Math.sqrt(5)))).size([
/* treemapWidth,
treemapHeight, */
el.zoomableHierarchyTreemap.width, el.zoomableHierarchyTreemap.height]).round(false).paddingInner(1);
}
var root = d3.hierarchy(el.zoomableHierarchyTreemap.treemapData).eachBefore(function (d) {
d.id = (d.parent ? d.parent.id + "." : "") + d.data.shortName;
})
// .sum((d) => d./* size */ articles)
.sum(function (d) {
return d[el.zoomableHierarchyTreemap.metricToScaleBy] /* size */ /* researchers */ /* articles */;
}).sort(function (a, b) {
return b.height - a.height || b.value - a.value;
});
el.initialize(root);
el.accumulate(root);
el.layout(root);
el.zoomableHierarchyTreemap.treemap(root);
el.display(root);
// draw a circle
d3.selectAll(".treemapSVGContainer").append("clipPath") // define a clip path
.attr("id", "rect-clip") // give the clipPath an ID
.append("rect").attr("x", el.zoomableHierarchyTreemap.margin.left).attr("y", /* el.zoomableHierarchyTreemap.margin.top */0).attr("width", el.zoomableHierarchyTreemap.width).attr("height", el.zoomableHierarchyTreemap.height);
// d3.selectAll(".treemap-group") /* d3.selectAll(".depth") */
// .attr("clip-path", "url(#rect-clip)");
// let treemapGroupWidth = d3
// .selectAll(".treemap-group")
// .node()
// .getBoundingClientRect().width;
var treemapGroupHeight = d3.selectAll(".treemap-group").node().getBoundingClientRect().height;
d3.selectAll(".treemapSVGContainer")
/* .attr("width", treemapGroupWidth) */.attr("height", treemapGroupHeight);
/* d3.selectAll(".displayTreeBy").text(
"Data displayed by number of: '" +
el.zoomableHierarchyTreemap.metricToScaleByLU[
el.zoomableHierarchyTreemap.metricToScaleBy
] +
"'"
); */
d3.selectAll(".treemapGroupBySelection").on("change", function () {});
d3.selectAll(".treemapLevelSelection").on("change", function () {
var plannedNewLevel = this.value;
var id = this.id.replaceAll("level", "");
if (el.zoomableHierarchyTreemap.proposedHierarchyDefinition.indexOf(plannedNewLevel) != -1) {
var element = document.getElementById(this.id);
element.value = el.zoomableHierarchyTreemap.hierarchyDefinition[id];
d3.selectAll(".searchBanner").append("div").attr("class", "hierarchy-selector-error-tooltip").style("top", d3.selectAll(".controlsBanner").style("height")).append("label").attr("class", "hierarchy-selector-error-tooltip-label").text("Your selection is already used for another level. Please reselect.");
var myTimeout = setTimeout(function () {
d3.selectAll(".hierarchy-selector-error-tooltip").classed("hide", true);
}, 5000);
return;
} else {}
var proposedLevel0 = document.getElementById("treemap-level0").value;
var proposedLevel1 = document.getElementById("treemap-level1").value;
var proposedLevel2 = document.getElementById("treemap-level2").value;
// update proposed hierarchy defintion to taht will potentially be used to rebuild new hierarchy visual.
el.zoomableHierarchyTreemap.proposedHierarchyDefinition = [proposedLevel0, proposedLevel1, proposedLevel2];
document.getElementById("updateTreemapChart").disabled = false;
d3.select("#updateTreemapChart").classed("disabled", false);
return;
});
return;
} // end function drawZoomableHierarchyTreemapChart
}, {
key: "initialize",
value: function initialize(root) {
var el = this;
root.x = root.y = 0;
root.x1 = el.zoomableHierarchyTreemap.width;
root.y1 = el.zoomableHierarchyTreemap.height;
root.depth = 0;
}
// Aggregate the values for internal nodes. This is normally done by the
// treemap layout, but not here because of our custom implementation.
// We also take a snapshot of the original children (_children) to avoid
// the children being overwritten when layout is computed.
}, {
key: "accumulate",
value: function accumulate(d) {
var el = this;
return (d._children = d.children) ? d.value = d.children.reduce(function (p, v) {
return p + el.accumulate(v);
}, 0) : d.value;
}
// Compute the treemap layout recursively such that each group of siblings
// uses the same size (1×1) rather than the dimensions of the parent cell.
// This optimizes the layout for the current zoom state. Note that a wrapper
// object is created for the parent node for each group of siblings so that
// the parent’s dimensions are not discarded as we recurse. Since each group
// of sibling was laid out in 1×1, we must rescale to fit using absolute
// coordinates. This lets us use a viewport to zoom.
}, {
key: "layout",
value: function layout(d) {
var el = this;
if (d._children) {
// treemap.nodes({_children: d._children});
// treemap(d);
d._children.forEach(function (c) {
//c.x0 = d.x0 + c.x0 * (d.x1 - d.x0);
//c.y0 = d.y0 + c.y0 * (d.y1 - d.y0);
//c.x1 *= d.x1;
//c.y1 *= d.y1;
c.x0 = d.x0 + c.x0 * d.x1;
c.y0 = d.y0 + c.y0 * d.y1;
c.x1 *= d.x1 - d.x0;
c.y1 *= d.y1 - d.y0;
c.parent = d;
el.layout(c);
});
}
return;
} // end function layout
}, {
key: "display",
value: function display(d) {
var el = this;
if (d.data.children.length == 1) {
// return;
} // end if ..
//
el.zoomableHierarchyTreemap.grandparent.datum(d.parent).on("click", transition).select("text").text(el.name_it(d));
var g1 = el.zoomableHierarchyTreemap.svg.insert("g", ".grandparent").datum(d).attr("class", "depth");
// // draw a circle
// d3.selectAll(".depth")
// .append("clipPath") // define a clip path
// .attr("id", "rect-clip") // give the clipPath an ID
// .append("rect")
// .attr("x", el.zoomableHierarchyTreemap.margin.left)
// .attr("y", /* el.zoomableHierarchyTreemap.margin.top */ 0)
// .attr("width", el.zoomableHierarchyTreemap.width)
// .attr("height", el.zoomableHierarchyTreemap.height);
/* d3.selectAll(".treemap-group") */
d3.selectAll(".depth").attr("clip-path", "url(#rect-clip)");
var g = g1.selectAll("g").data(d._children).enter().append("g");
g.filter(function (d) {
return d._children;
}).classed("children", true).on("click", transition);
var children = g.selectAll(".child").data(function (d) {
return d._children || [d];
}).enter().append("g");
children.append("rect").attr("class", "child").call(buildRect).append("title").text(function (d) {
return d.data.shortName + " (" + el.zoomableHierarchyTreemap.formatNumber(d.value) + ")";
});
children.append("text").attr("class", "ctext").text(function (d) {
return d.data.shortName;
}).call(text2);
g.append("rect").attr("class", "parent").call(buildRect);
var t = g.append("text").attr("class", "ptext").attr("dy", ".75em");
t.append("tspan").text(function (d) {
return d.data.shortName;
});
t.append("tspan").attr("dy", "1.0em").text(function (d) {
return el.zoomableHierarchyTreemap.formatNumber(d.value);
});
t.call(text);
g.selectAll("rect").style("fill", function (d) {
return el.zoomableHierarchyTreemap.color(d.data.shortName);
});
function transition(d) {
if (el.zoomableHierarchyTreemap.transitioning || !d) return;
el.zoomableHierarchyTreemap.transitioning = true;
var g2 = el.display(d),
t1 = g1.transition().duration(1250),
t2 = g2.transition().duration(1250);
// Update the domain only after entering new elements.
el.zoomableHierarchyTreemap.x.domain([d.x0, d.x0 + (d.x1 - d.x0)]);
el.zoomableHierarchyTreemap.y.domain([d.y0, d.y0 + (d.y1 - d.y0)]);
// Enable anti-aliasing during the transition.
el.zoomableHierarchyTreemap.svg.style("shape-rendering", null);
// Draw child nodes on top of parent nodes.
el.zoomableHierarchyTreemap.svg.selectAll(".depth").sort(function (a, b) {
return a.depth - b.depth;
});
// Fade-in entering text.
g2.selectAll("text").style("fill-opacity", 0);
// Transition to the new view.
t1.selectAll(".ptext").call(text).style("fill-opacity", 0);
t2.selectAll(".ptext").call(text).style("fill-opacity", 1);
t1.selectAll(".ctext").call(text2).style("fill-opacity", 0);
t2.selectAll(".ctext").call(text2).style("fill-opacity", 1);
t1.selectAll("rect").call(buildRect);
t2.selectAll("rect").call(buildRect);
// Remove the old node when the transition is finished.
t1.remove().on("end", function () {
el.zoomableHierarchyTreemap.svg.style("shape-rendering", "crispEdges");
el.zoomableHierarchyTreemap.transitioning = false;
});
}
function buildRect(rectItem) {
//
rectItem.attr("x", function (d) {
return el.zoomableHierarchyTreemap.x(d.x0);
}).attr("y", function (d) {
return el.zoomableHierarchyTreemap.y(d.y0);
}).attr("width", function (d) {
var w = el.zoomableHierarchyTreemap.x(d.x1) - el.zoomableHierarchyTreemap.x(d.x0);
return w;
}).attr("height", function (d) {
var h = el.zoomableHierarchyTreemap.y(d.y1) - el.zoomableHierarchyTreemap.y(d.y0);
return h;
});
return;
} // end function buildRect
function text(text) {
text.selectAll("tspan").attr("class", "tspan-element").attr("x", function (d) {
return el.zoomableHierarchyTreemap.x(d.x0) + 6;
});
text.attr("x", function (d) {
return el.zoomableHierarchyTreemap.x(d.x0) + 6;
}).attr("y", function (d) {
return el.zoomableHierarchyTreemap.y(d.y0) + 3;
}).style("opacity", function (d) {
var w = el.zoomableHierarchyTreemap.x(d.x1) - el.zoomableHierarchyTreemap.x(d.x0);
return this.getComputedTextLength() < w - 6 ? 1 : 0;
});
return;
} // end function text
function text2(text) {
text.attr("class", "tspan-element2").attr("x", function (d) {
return el.zoomableHierarchyTreemap.x(d.x1) - this.getComputedTextLength() + 6;
}).attr("y", function (d) {
return el.zoomableHierarchyTreemap.y(d.y1) - 6;
}).style("opacity", function (d) {
var w = el.zoomableHierarchyTreemap.x(d.x1) - el.zoomableHierarchyTreemap.x(d.x0);
return this.getComputedTextLength() < w - 6 ? 1 : 0;
});
return;
} // end function text2
return g;
} // end function display
}, {
key: "name_it",
value: function name_it(d) {
var el = this;
return d.parent ? el.name_it(d.parent) + " / " + d.data.shortName + " (" + el.zoomableHierarchyTreemap.formatNumber(d.value) + ")" : d.data.shortName + " (" + el.zoomableHierarchyTreemap.formatNumber(d.value) + " " + el.zoomableHierarchyTreemap.metricToScaleByLU[el.zoomableHierarchyTreemap.metricToScaleBy] + ")";
return;
} // end function name_it
}]);
}(); // end class declaration