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})`); } })
this.container.append('g').attr('class', 'nodes') .selectAll('circle') .data(nodes) .enter() .append('circle') .attr('r', d => radius(d.total)) .attr('fill', d => color(d.id)) .call(d3.drag() .on('start', dragstart) .on('drag', dragging) .on('end', dragend))
this.circle .enter().append('g') .attr('class', 'node') .merge(this.circle) .call(d3.drag() .on("start", this.dragstarted.bind(this)) .on("drag", this.dragged.bind(this)) .on("end", this.dragended.bind(this))) .on('click', (d) => window.alert(`you click node ${d.id}`))
d3.drag<any, GNode, GNode>() .on("drag", function (d) { d.x += d3.event.dx; d.y += d3.event.dy; view.updateGraphVisibility(); })
d3.drag() .on('drag', function () { const x = d3.mouse(this.parentElement)[0]; resizer.sepRight = Math.max(resizer.sepLeft, Math.min(x, document.body.getBoundingClientRect().width)); resizer.updatePanes(); }) .on('start', function () { resizer.resizerRight.classed("dragged", true); }) .on('end', function () { // If the panel is close enough to the right, treat it as if it was pulled all the way to the right. const x = d3.mouse(this.parentElement)[0]; const clientWidth = document.body.getBoundingClientRect().width; if (x >= (clientWidth - deadWidth)) { resizer.sepRight = clientWidth - 1; resizer.updatePanes(); } // Snap if dragged all the way to the right. resizer.resizerRight.classed("snapped", resizer.sepRight >= clientWidth - 1); if (!resizer.isRightSnapped()) { window.sessionStorage.setItem("disassembly-pane-percent", `${resizer.sepRight / clientWidth}`); } resizer.snapper.setDisassemblyExpanded(!resizer.isRightSnapped()); resizer.resizerRight.classed("dragged", false); })
componentDidMount() { const simulation = this.props.simulation; d3.selectAll('.node').call( d3 .drag() .on('start', onDragStart) .on('drag', onDrag) .on('end', onDragEnd) ); function onDragStart(d) { if (!d3.event.active) { simulation.alphaTarget(0.3).restart(); } d.fx = d.x; d.fy = d.y; } function onDrag(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function onDragEnd(d) { if (!d3.event.active) { simulation.alphaTarget(0); } d.fx = null; d.fy = null; } }
d3.drag() .on('drag', function () { const x = d3.mouse(this.parentElement)[0]; resizer.sepLeft = Math.min(Math.max(0, x), resizer.sepRight); resizer.updatePanes(); }) .on('start', function () { resizer.resizerLeft.classed("dragged", true); }) .on('end', function () { // If the panel is close enough to the left, treat it as if it was pulled all the way to the lefg. const x = d3.mouse(this.parentElement)[0]; if (x <= deadWidth) { resizer.sepLeft = 0; resizer.updatePanes(); } // Snap if dragged all the way to the left. resizer.resizerLeft.classed("snapped", resizer.sepLeft === 0); if (!resizer.isLeftSnapped()) { window.sessionStorage.setItem("source-pane-percent", `${resizer.sepLeft / document.body.getBoundingClientRect().width}`); } resizer.snapper.setSourceExpanded(!resizer.isLeftSnapped()); resizer.resizerLeft.classed("dragged", false); })
.on("mousemove", function(){return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged)
d3.drag() .on('drag', function () { const y = d3.mouse(this.parentElement)[1]; resizer.sepRangesHeight = Math.max(100, Math.min(y, window.innerHeight) - resizer.RESIZER_RANGES_HEIGHT_BUFFER_PERCENTAGE); resizer.updatePanes(); }) .on('start', function () { resizer.resizerRanges.classed("dragged", true); }) .on('end', function () { // If the panel is close enough to the bottom, treat it as if it was pulled all the way to the bottom. const y = d3.mouse(this.parentElement)[1]; if (y >= (window.innerHeight - deadHeight)) { resizer.sepRangesHeight = window.innerHeight; resizer.updatePanes(); } // Snap if dragged all the way to the bottom. resizer.resizerRanges.classed("snapped", resizer.sepRangesHeight >= window.innerHeight - 1); if (!resizer.isRangesSnapped()) { window.sessionStorage.setItem("ranges-pane-height-percent", `${resizer.sepRangesHeight / window.innerHeight}`); } resizer.snapper.setRangesExpanded(!resizer.isRangesSnapped()); resizer.resizerRanges.classed("dragged", false); })