This example is using the d3.behavior.drag for moving a line via the line endpoints. The endpoints have fill opacity equal to 0.0.
This is a variant of my earlier example: moving the line via endponts
Last active
January 16, 2017 09:28
-
-
Save dimitardanailov/c94959170383fb5082dd5fdea06dd1bb to your computer and use it in GitHub Desktop.
Moving the line via transparent endpoints
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| svg { | |
| font-family: "Helvetica Neue", Helvetica; | |
| } | |
| line { | |
| shape-rendering: crispEdges; | |
| vector-effect: non-scaling-stroke; | |
| stroke: #000; | |
| stroke-width: 2px; | |
| } | |
| circle { | |
| shape-rendering: crispEdges; | |
| vector-effect: non-scaling-stroke; | |
| fill: lightsteelblue; | |
| fill-opacity: 0; | |
| } | |
| circle:hover { | |
| cursor: pointer; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| activeClassName = 'active-d3-item'; | |
| var svg = d3.select('body').append('svg'); | |
| svg.attr('width', width); | |
| svg.attr('height', height); | |
| //The data for our lines and endpoints | |
| var data = [ | |
| { | |
| 'x1': 350, | |
| 'y1': 15, | |
| 'x2': 250, | |
| 'y2': 33 | |
| }, | |
| { | |
| 'x1': 420, | |
| 'y1': 420, | |
| 'x2': 250, | |
| 'y2': 333 | |
| }, | |
| { | |
| 'x1': 140, | |
| 'y1': 120, | |
| 'x2': 220, | |
| 'y2': 220 | |
| }, | |
| { | |
| 'x1': 180, | |
| 'y1': 55, | |
| 'x2': 330, | |
| 'y2': 320 | |
| }, | |
| { | |
| 'x1': 200, | |
| 'y1': 260, | |
| 'x2': 150, | |
| 'y2': 180 | |
| } | |
| ]; | |
| // Generating the svg lines attributes | |
| var lineAttributes = { | |
| 'x1': function(d) { | |
| return d.x1; | |
| }, | |
| 'y1': function(d) { | |
| return d.y1; | |
| }, | |
| 'x2': function(d) { | |
| return d.x2; | |
| }, | |
| 'y2': function(d) { | |
| return d.y2; | |
| } | |
| }; | |
| // Pointer to the d3 lines | |
| var lines = svg | |
| .selectAll('line') | |
| .data(data) | |
| .enter() | |
| .append('line') | |
| .attr(lineAttributes); | |
| var topEndPoints = data.map(function(line, i) { | |
| return { | |
| 'x': line.x1, | |
| 'y': line.y1, | |
| 'marker': 'marker-start', | |
| 'lineIndex': i | |
| }; | |
| }); | |
| var bottomEndPoints = data.map(function(line, i) { | |
| return { | |
| 'x': line.x2, | |
| 'y': line.y2, | |
| 'marker': 'marker-end', | |
| 'lineIndex': i | |
| }; | |
| }); | |
| var endPointsData = topEndPoints.concat(bottomEndPoints); | |
| // Generating the svg circle attributes | |
| var endPointsAttributtes = { | |
| 'r': 7, | |
| 'cx': function(d) { | |
| return d.x; | |
| }, | |
| 'cy': function(d) { | |
| return d.y; | |
| } | |
| }; | |
| var drag = d3.behavior.drag() | |
| .origin(function(d) { return d; }) | |
| .on('dragstart', dragstarted) | |
| .on('drag', dragged) | |
| .on('dragend', dragended); | |
| // Pointer to d3 circles | |
| var endPoints = svg | |
| .selectAll('circle') | |
| .data(endPointsData) | |
| .enter() | |
| .append('circle') | |
| .attr(endPointsAttributtes) | |
| .call(drag); | |
| function dragstarted() { | |
| d3.select(this).classed(activeClassName, true); | |
| } | |
| function dragged(d, i) { | |
| var marker = d3.select(this); | |
| // Update the marker properties | |
| marker | |
| .attr('cx', d.x = d3.event.x) | |
| .attr('cy', d.y = d3.event.y); | |
| // Update the line properties | |
| lines | |
| .filter(function(lineData, lineIndex) { | |
| return lineIndex === d.lineIndex; | |
| }) | |
| .attr('x1', function(lineData) { | |
| return d.marker === 'marker-start' ? lineData.x1 = d.x : lineData.x1; | |
| }) | |
| .attr('y1', function(lineData) { | |
| return d.marker === 'marker-start' ? lineData.y1 = d.y : lineData.y1; | |
| }) | |
| .attr('x2', function(lineData) { | |
| return d.marker === 'marker-end' ? lineData.x2 = d.x : lineData.x2; | |
| }) | |
| .attr('y2', function(lineData) { | |
| return d.marker === 'marker-end' ? lineData.y2 = d.y : lineData.y2; | |
| }); | |
| } | |
| function dragended() { | |
| d3.select(this).classed(activeClassName, false); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment