circlepack-chart
Version:
A circle packing interactive chart web component for visualizing hierarchical data
366 lines (352 loc) • 12.8 kB
JavaScript
import { select } from 'd3-selection';
import { scaleLinear } from 'd3-scale';
import { hierarchy, pack } from 'd3-hierarchy';
import { transition } from 'd3-transition';
import { interpolate } from 'd3-interpolate';
import zoomable from 'd3-zoomable';
import Kapsule from 'kapsule';
import tinycolor from 'tinycolor2';
import accessorFn from 'accessor-fn';
import Tooltip from 'float-tooltip';
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".circlepack-viz {\n cursor: move;\n}\n\n.circlepack-viz circle {\n cursor: pointer;\n stroke: lightgrey;\n stroke-opacity: .4;\n opacity: .85;\n transition-property: stroke-opacity, opacity;\n transition-duration: .4s;\n}\n\n.circlepack-viz circle:hover {\n stroke-opacity: 1;\n opacity: 1;\n transition-duration: .05s;\n}\n\n.circlepack-viz text {\n font-size: 12px;\n font-family: sans-serif;\n pointer-events: none;\n dominant-baseline: middle;\n text-anchor: middle;\n fill: #404041;\n}\n\n.circlepack-viz text.light {\n fill: #F7F7F7;\n}\n\n.circlepack-viz .tooltip-title {\n font-weight: bold;\n text-align: center;\n margin-bottom: 5px;\n}\n\n.circlepack-viz {\n position: relative;\n}\n";
styleInject(css_248z);
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 _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
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;
}
}
var LABELS_WIDTH_OPACITY_SCALE = scaleLinear().domain([4, 8]).clamp(true); // px per char
var circlepack = Kapsule({
props: {
width: {
"default": window.innerWidth,
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
height: {
"default": window.innerHeight,
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
data: {
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
children: {
"default": 'children',
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
sort: {
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
label: {
"default": function _default(d) {
return d.name;
}
},
size: {
"default": 'value',
onChange: function onChange(_, state) {
this.zoomReset();
state.needsReparse = true;
}
},
padding: {
"default": 4,
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
color: {
"default": function _default(d) {
return 'lightgrey';
}
},
borderWidth: {
"default": 1
},
nodeClassName: {},
// Additional css classes to add on each circle node
minCircleRadius: {
"default": 3
},
excludeRoot: {
"default": false,
onChange: function onChange(_, state) {
state.needsReparse = true;
}
},
showLabels: {
"default": true
},
showTooltip: {
"default": function _default(d) {
return true;
},
triggerUpdate: false
},
tooltipTitle: {
"default": null,
triggerUpdate: false
},
tooltipContent: {
"default": function _default(d) {
return '';
},
triggerUpdate: false
},
onClick: {
triggerUpdate: false
},
onRightClick: {
triggerUpdate: false
},
onHover: {
triggerUpdate: false
},
transitionDuration: {
"default": 800,
triggerUpdate: false
}
},
methods: {
zoomBy: function zoomBy(state, k) {
state.zoom.zoomBy(k, state.transitionDuration);
return this;
},
zoomReset: function zoomReset(state) {
state.zoom.zoomReset(state.transitionDuration);
return this;
},
zoomToNode: function zoomToNode(state) {
var d = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var node = d.__dataNode;
if (node) {
var ZOOM_REL_PADDING = 0.12;
var k = Math.max(1, Math.min(state.width, state.height) / (node.r * 2) * (1 - ZOOM_REL_PADDING));
var tr = {
k: k,
x: -Math.max(0, Math.min(state.width * (1 - 1 / k),
// Don't pan out of chart boundaries
node.x - state.width / k / 2 // Center circle in view
)),
y: -Math.max(0, Math.min(state.height * (1 - 1 / k), node.y - state.height / k / 2))
};
state.zoom.zoomTo(tr, state.transitionDuration);
}
return this;
},
_parseData: function _parseData(state) {
if (state.data) {
var hierData = hierarchy(state.data, accessorFn(state.children)).sum(accessorFn(state.size));
if (state.sort) {
hierData.sort(state.sort);
}
pack().padding(state.padding).size([state.width, state.height])(hierData);
hierData.descendants().forEach(function (d, i) {
d.id = i; // Mark each node with a unique ID
d.data.__dataNode = d; // Dual-link data nodes
});
state.layoutData = hierData.descendants().filter(state.excludeRoot ? function (d) {
return d.depth > 0;
} : function () {
return true;
});
}
}
},
stateInit: function stateInit() {
return {
zoom: zoomable()
};
},
init: function init(domNode, state) {
var _this = this;
var el = select(domNode).append('div').attr('class', 'circlepack-viz');
state.svg = el.append('svg');
state.canvas = state.svg.append('g');
state.tooltip = new Tooltip(el);
// zoom/pan
state.zoom(state.svg).svgEl(state.canvas).onChange(function (tr, prevTr, duration) {
if (state.showLabels && !duration) {
// Scale labels immediately if not animating
state.canvas.selectAll('text').attr('transform', "scale(".concat(1 / tr.k, ")"));
}
// Prevent using transitions when using mouse wheel to zoom
state.skipTransitionsOnce = !duration;
state._rerender();
});
state.svg.on('click', function (ev) {
return (state.onClick || _this.zoomReset)(null, ev);
}) // By default reset zoom when clicking on canvas
.on('contextmenu', function (ev) {
if (state.onRightClick) {
// By default do nothing when right-clicking on canvas
state.onRightClick(null, ev);
ev.preventDefault();
}
}).on('mouseover', function (ev) {
return state.onHover && state.onHover(null, ev);
});
},
update: function update(state) {
var _this2 = this;
if (state.needsReparse) {
this._parseData();
state.needsReparse = false;
}
state.svg.style('width', state.width + 'px').style('height', state.height + 'px');
state.zoom.translateExtent([[0, 0], [state.width, state.height]]);
if (!state.layoutData) return;
var zoomTr = state.zoom.current();
var cell = state.canvas.selectAll('.node').data(state.layoutData.filter(function (d) {
return (
// Show only circles in scene that are larger than the threshold
d.x + d.r > -zoomTr.x / zoomTr.k && d.x - d.r < (state.width - zoomTr.x) / zoomTr.k && d.y + d.r > -zoomTr.y / zoomTr.k && d.y - d.r < (state.height - zoomTr.y) / zoomTr.k && d.r >= state.minCircleRadius / zoomTr.k
);
}), function (d) {
return d.id;
});
var nameOf = accessorFn(state.label);
var colorOf = accessorFn(state.color);
var borderWidthOf = accessorFn(state.borderWidth);
var nodeClassNameOf = accessorFn(state.nodeClassName);
var animate = !state.skipTransitionsOnce;
state.skipTransitionsOnce = false;
var transition$1 = transition().duration(animate ? state.transitionDuration : 0);
// Exiting
cell.exit().transition(transition$1).remove();
// Entering
var newCell = cell.enter().append('g').attr('transform', function (d) {
return "translate(".concat(d.x, ",").concat(d.y, ")");
});
newCell.append('circle').attr('id', function (d) {
return "circle-".concat(d.id);
}).attr('r', 0).style('stroke-width', function (d) {
return "".concat(borderWidthOf(d.data), "px");
}).on('click', function (ev, d) {
ev.stopPropagation();
(state.onClick || _this2.zoomToNode)(d.data, ev);
}).on('contextmenu', function (ev, d) {
ev.stopPropagation();
if (state.onRightClick) {
state.onRightClick(d.data, ev);
ev.preventDefault();
}
}).on('mouseover', function (ev, d) {
ev.stopPropagation();
state.onHover && state.onHover(d.data, ev);
state.tooltip.content(!!state.showTooltip(d.data, d) && "\n <div class=\"tooltip-title\">\n ".concat(state.tooltipTitle ? state.tooltipTitle(d.data, d) : getNodeStack(d).slice(state.excludeRoot ? 1 : 0).map(function (d) {
return nameOf(d.data);
}).join(' → '), "\n </div>\n ").concat(state.tooltipContent(d.data, d), "\n "));
}).on('mouseout', function () {
return state.tooltip.content(false);
});
newCell.append('clipPath').attr('id', function (d) {
return "clip-".concat(d.id);
}).append('use').attr('xlink:href', function (d) {
return "#circle-".concat(d.id);
});
newCell.append('g').attr('clip-path', function (d) {
return "url(#clip-".concat(d.id, ")");
}).append('g').attr('class', 'label-container').append('text').attr('class', 'path-label');
// Entering + Updating
var allCells = cell.merge(newCell);
allCells.attr('class', function (d) {
return ['node'].concat(_toConsumableArray("".concat(nodeClassNameOf(d.data) || '').split(' ').map(function (str) {
return str.trim();
}))).filter(function (s) {
return s;
}).join(' ');
});
allCells.transition(transition$1).attr('transform', function (d) {
return "translate(".concat(d.x, ",").concat(d.y, ")");
});
allCells.select('circle').transition(transition$1).attr('r', function (d) {
return d.r;
}).style('fill', function (d) {
return colorOf(d.data, d.parent);
}).style('stroke-width', function (d) {
return "".concat(borderWidthOf(d.data) / zoomTr.k, "px");
});
allCells.select('g.label-container').style('display', state.showLabels ? null : 'none');
if (state.showLabels) {
// Update previous scale
var prevK = state.prevK || 1;
state.prevK = zoomTr.k;
allCells.select('text.path-label').classed('light', function (d) {
return !tinycolor(colorOf(d.data, d.parent)).isLight();
}).text(function (d) {
return nameOf(d.data);
}).transition(transition$1).style('opacity', function (d) {
return "".concat(LABELS_WIDTH_OPACITY_SCALE(d.r * 2 * zoomTr.k / nameOf(d.data).length));
}).attrTween('transform', function () {
var kTr = interpolate(prevK, zoomTr.k);
return function (t) {
return "scale(".concat(1 / kTr(t), ")");
};
});
}
//
function getNodeStack(d) {
var stack = [];
var curNode = d;
while (curNode) {
stack.unshift(curNode);
curNode = curNode.parent;
}
return stack;
}
}
});
export { circlepack as default };