Improved responsiveness of graphs:
asset cost
complexity
related-measurables (spindle)
@@ -22,7 +22,6 @@ import {event, select} from "d3-selection";
import {determineCounterpart, sanitizeRelationships} from "../../measurable-relationship-utils";
import {initialiseData} from "../../../common";
import {stopPropagation} from "../../../common/browser-utils";
-import {responsivefy} from "../../../common/d3-utils";
import {CORE_API} from "../../../common/services/core-api-utils";
import {easeLinear} from "d3-ease";
import {transition} from "d3-transition";
@@ -103,8 +102,10 @@ const styles = {
function prepareGroups(holder, onCategoryClear) {
const svg = select(holder)
- .attr("width", dimensions.width)
- .attr("height", dimensions.height)
+ svg
+ .style("max-width", "700px")
+ .attr("viewBox", `0 0 ${dimensions.width} ${dimensions.height}`)
+ .attr("preserveAspectRatio", "xMinYMin meet")
.on("click", () => onCategoryClear());
const bridges = svg.append("g").classed(styles.bridges, true);
@@ -273,7 +274,6 @@ function drawBridges(group, categories = [], deltaAngle) {
.attr("y2", y);
});
-
// -- EXIT --
bridges
.exit()
@@ -489,9 +489,9 @@ function controller($element, $q, $timeout, serviceBroker) {
vm.$onInit = () => {
initialiseData(vm, initialState);
const holder = $element.find("svg")[0];
+
const handlers = mkHandlers(vm, $timeout);
groups = prepareGroups(holder, handlers.onCategoryClear);
- destroyResizeListener = responsivefy(groups.svg);
loadData()
.then(() => draw(groups, mkData(vm), handlers));
};
