D3.js辅助比例尺、缩放、拖拽功能-Zoom Pan Axis

//D3.js Zoom Pan Axis

<!DOCTYPE html>
<html>
	<head>
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<!-- <script src="./test/html2canvas.min.js"></script> -->

		<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script> -->
		<!-- <script src="//cdn.jsdelivr.net/npm/d3@7"></script> -->
		<!-- <script src="./d3.min.js"></script> -->
		<!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
		<script src="https://d3js.org/d3.v7.min.js"></script>
		<script src="https://d3js.org/d3-axis.v3.min.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/d3-axis@3"></script> -->
	</head>
	<body>
		<svg>
			<defs>
				<style>
					.axis .domain {
						display: none;
					}

					.axis line {
						stroke-opacity: 0.3;
						shape-rendering: crispEdges;
					}

					.view {
						fill: url(#gradient);
						stroke: #000;
					}
				</style>

				<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
					<stop offset="0.0%" stop-color="#2c7bb6"></stop>
					<stop offset="12.5%" stop-color="#00a6ca"></stop>
					<stop offset="25.0%" stop-color="#00ccbc"></stop>
					<stop offset="37.5%" stop-color="#90eb9d"></stop>
					<stop offset="50.0%" stop-color="#ffff8c"></stop>
					<stop offset="62.5%" stop-color="#f9d057"></stop>
					<stop offset="75.0%" stop-color="#f29e2e"></stop>
					<stop offset="87.5%" stop-color="#e76818"></stop>
					<stop offset="100.0%" stop-color="#d7191c"></stop>
				</linearGradient>
			</defs>
		</svg>
	</body>

	<style>
		* {
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
		$(function() {
			var width = 1920;
			var height = 1080;

			let svg = d3.select("svg").attr("viewBox", [0, 0, width, height]);

			const view = svg.append("g")
				.attr("class", "view")
				.attr("x", 0.5)
				.attr("y", 0.5)
				.attr("width", width - 1)

			var y = d3.scaleLinear()
				.domain([-1, height + 1])
				.range([-1, height + 1])

			var yAxis = d3.axisRight(y)
				.ticks(20)
				.tickSize(width)
				.tickPadding(8 - width)

			var x = d3.scaleLinear()
				.domain([-1, width + 1])
				.range([-1, width + 1])

			var xAxis = d3.axisBottom(x)
				.ticks(((width + 2) / (height + 2)) * 20)
				.tickSize(height)
				.tickPadding(8 - height)



			const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis);
			const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis);

			const zoom = d3.zoom()
				.scaleExtent([1, 100])
				.translateExtent([
					[-100, -100],
					[width + 90, height + 100]
				])
				.filter(filter)
				.on("zoom", zoomed);

			return Object.assign(svg.call(zoom).node(), {
				reset
			});

			function zoomed({
				transform
			}) {
				view.attr("transform", transform);
				gX.call(xAxis.scale(transform.rescaleX(x)));
				gY.call(yAxis.scale(transform.rescaleY(y)));
			}

			function reset() {
				svg.transition()
					.duration(750)
					.call(zoom.transform, d3.zoomIdentity);
			}

			function filter(event) {
				event.preventDefault();
				return (!event.ctrlKey || event.type === 'wheel') && !event.button;
			}

		})
	</script>
</html>

//D3.js Zoom Pan 
<script src="./test/D3/d3.min.js"></script>

	var zoom = d3.zoom()
	zoom.on('zoom',handleZoom);
	d3.select('#svg ').call(zoom);
	
	function handleZoom(e) {
		d3.select('#svg g').attr('transform', e.transform);

	}

D3.js辅助比例尺、缩放、拖拽功能-Zoom Pan Axis

猜你喜欢