d3.drag().on('drag', () => { const barsTranslateX = bars.node().transform.baseVal[0].matrix.e; const barsWidth = bars.node().getBBox().width; const xAxisTranslateX = d3.select('.axis.x').node().transform.baseVal[0].matrix.e; const dx = d3.event.dx; if (barsTranslateX + dx < 0 && barsTranslateX + dx > -barsWidth + this.innerWidth()) { bars.attr('transform', `translate(${barsTranslateX + dx}, 0)`); d3.select('.axis.x').attr('transform', `translate(${xAxisTranslateX + d3.event.dx}, ${xAxisTranslateY})`); } })
function zoomed() { var body = d3.select('body'); var circle = d3.selectAll('circle'); var transform = d3.event.transform; circle.attr("transform", function(d) { return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")"; }); }
function dragend(d) { if (!d3.event.active) sim.alphaTarget(0); d.fx = null; d.fy = null; }
d3.zoom<SVGElement, any>() .scaleExtent([0.2, 40]) .on("zoom", zoomed) .on("start", function () { if (d3.event.shiftKey) return; d3.select('body').style("cursor", "move"); }) .on("end", function () { d3.select('body').style("cursor", "auto"); })
function highlightParents(d) { var colour = d3.event.type === 'mouseover' ? 'green' : '#777'; var depth = d.d; for(var i = 0; i <= depth; i++) { d3.select('#id-'+parseInt(d.i)).style('stroke', colour); d = branches[d.parent]; } }
legend.on('wheel', function() { scrollBoxY = Lib.constrain( scrollBox.attr('data-scroll') - d3.event.deltaY / scrollBarYMax * scrollBoxYMax, -scrollBoxYMax, 0); scrollBarY = constants.scrollBarMargin - scrollBoxY / scrollBoxYMax * scrollBarYMax; scrollHandler(scrollBarY, scrollBoxY); d3.event.preventDefault(); });
d3.behavior.drag().on('drag', function() { scrollBarY = Lib.constrain( d3.event.y - constants.scrollBarHeight / 2, constants.scrollBarMargin, constants.scrollBarMargin + scrollBarYMax); scrollBoxY = - (scrollBarY - constants.scrollBarMargin) / scrollBarYMax * scrollBoxYMax; scrollHandler(scrollBarY, scrollBoxY); })
selectAllNodes() { if (!d3.event.shiftKey) { this.state.selection.clear(); } const allVisibleNodes = [...this.graph.nodes(n => n.visible)]; this.state.selection.select(allVisibleNodes, true); this.updateGraphVisibility(); }
d3.select(window).on("keydown", function() { switch (d3.event.keyCode) { case 37: year = Math.max(year0, year - 10); break case 39: year = Math.min(year1, year + 10); break default: return null } update(); })
_zoomed() { const { treeG } = this; const { x, y } = d3.event.transform; treeG.current.setAttribute('transform', `translate(${x}, ${y})`); }
function dragstart(d) { if (!d3.event.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }
_zoomed() { const { clusterG } = this; const { x, y } = d3.event.transform; clusterG.current.setAttribute('transform', `translate(${x}, ${y})`); }