zplane with random draggable points

2021-06-07 18:21:05 +02:00 · 2021-06-07 18:21:05 +02:00 · 00bc86eb87
commit 00bc86eb87
--- a/index.html
+++ b/index.html
@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- https://stackoverflow.com/questions/42720488/d3-v4-drag-line-chart-with-x-and-y-axes -->
+<!-- Thanks to Mark - https://stackoverflow.com/users/16363/mark -->
+<svg width="500" height="350"></svg>
+<script src="https://d3js.org/d3.v4.min.js"></script>
+<script>
+
+var svg = d3.select("svg"),
+    margin = {top: 20, right: 20, bottom: 30, left: 50},
+    width = +svg.attr("width") - margin.left - margin.right,
+    height = +svg.attr("height") - margin.top - margin.bottom;    
+
+let points = d3.range(1, 10).map(function(i) {
+    return [i * width / 10, 50 + Math.random() * (height - 100)];
+});
+var x = d3.scaleLinear()
+    .rangeRound([0, width]);
+
+var y = d3.scaleLinear()
+    .rangeRound([height, 0]);
+
+var xAxis = d3.axisBottom(x),
+    yAxis = d3.axisLeft(y);
+
+var line = d3.line()
+    .x(function(d) { return x(d[0]); })
+    .y(function(d) { return y(d[1]); });
+    
+let drag = d3.drag()
+        .on('start', dragstarted)
+        .on('drag', dragged)
+        .on('end', dragended);
+        
+svg.append('rect')
+    .attr('class', 'zoom')
+    .attr('cursor', 'move')
+    .attr('fill', 'none')
+    .attr('pointer-events', 'all')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+
+ var focus = svg.append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+x.domain(d3.extent(points, function(d) { return d[0]; }));
+y.domain(d3.extent(points, function(d) { return d[1]; }));
+
+// focus.append("path")
+//     .datum(points)
+//     .attr("fill", "none")
+//     .attr("stroke", "steelblue")
+//     .attr("stroke-linejoin", "round")
+//     .attr("stroke-linecap", "round")
+//     .attr("stroke-width", 1.5)
+//     .attr("d", line);
+
+
+
+focus.selectAll('circle')
+    .data(points)
+    .enter()
+    .append('circle')
+    .attr('r', 5.0)
+    .attr('cx', function(d) { return x(d[0]);  })
+    .attr('cy', function(d) { return y(d[1]); })
+    .style('cursor', 'pointer')
+    .style('stroke', 'black')
+    .style('fill', 'blue')
+
+focus.selectAll('circle')
+        .call(drag);
+
+focus.append('g')
+    .attr('class', 'axis axis--x')
+    .attr('transform', 'translate(0,' + height/2 + ')')
+    .call(xAxis.ticks(0));
+    
+focus.append('g')
+    .attr('class', 'axis axis--y')
+    .attr('transform', 'translate(' + width/2 + ',0)')
+    .call(yAxis.ticks(0));
+
+focus.append('g')
+    .append('circle')
+    .style('stroke', 'red')
+    .style('fill', 'none')
+    .attr('r', 100.0)
+    .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')')
+
+function dragstarted(d) {
+    d3.select(this).raise().classed('active', true);
+}
+
+function dragged(d) {
+    d[0] = x.invert(d3.event.x);
+    d[1] = y.invert(d3.event.y);
+    d3.select(this)
+        .attr('cx', x(d[0]))
+        .attr('cy', y(d[1]))
+    focus.select('path').attr('d', line);
+}
+
+function dragended(d) {
+    d3.select(this).classed('active', false);
+}
+
+</script>