Modification of d3.curveStepBefore to round the corners. Code up for this stackoverflow question.
Last active
September 26, 2023 09:33
-
-
Save larsenmtl/8f26a673f66801ab34ef0fa352662627 to your computer and use it in GitHub Desktop.
d3-shape Custom Curve Implementation
This file contains 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: mit |
This file contains 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> | |
| <html> | |
| <head> | |
| <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="roundStep.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| var width = 900, | |
| height = 500, | |
| N = 10; | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| var points = []; | |
| for (var i = 0; i < N; i++) { | |
| points.push({ | |
| x: (width / N) * i + (width / N / 2), | |
| y: Math.random() * height | |
| }); | |
| } | |
| var line1 = d3.line() | |
| .x(function(d) { | |
| return d.x; | |
| }) | |
| .y(function(d) { | |
| return d.y; | |
| }) | |
| .curve(stepRound); | |
| var line2 = d3.line() | |
| .x(function(d) { | |
| return d.x; | |
| }) | |
| .y(function(d) { | |
| return d.y; | |
| }) | |
| .curve(d3.curveStepBefore); | |
| svg.append('path') | |
| .datum(points) | |
| .attr('d', line1) | |
| .attr('fill', 'none') | |
| .attr('stroke', 'orange') | |
| .attr('stroke-width', '4px'); | |
| svg.append('path') | |
| .datum(points) | |
| .attr('d', line2) | |
| .attr('fill', 'none') | |
| .attr('stroke', 'steelblue') | |
| .attr('stroke-width', '1px'); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| function Step(context) { | |
| this._context = context; | |
| this._t = 0; | |
| } | |
| Step.prototype = { | |
| areaStart: function() { | |
| this._line = 0; | |
| }, | |
| areaEnd: function() { | |
| this._line = NaN; | |
| }, | |
| lineStart: function() { | |
| this._x = this._y = NaN; | |
| this._point = 0; | |
| }, | |
| lineEnd: function() { | |
| if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath(); | |
| if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line; | |
| }, | |
| point: function(x, y) { | |
| x = +x, y = +y; | |
| switch (this._point) { | |
| case 0: { | |
| this._point = 1; | |
| this._context.moveTo(x, y); | |
| break; | |
| } | |
| case 1: this._point = 2; // proceed | |
| default: { | |
| if (this._t <= 0) { | |
| console.log(this._y) | |
| var xN = Math.abs(x - this._x) * 0.25, | |
| yN = Math.abs(y - this._y) * 0.25, | |
| mYb = (this._y < y) ? this._y + yN : this._y - yN, | |
| mYa = (this._y > y) ? y + yN : y - yN; | |
| this._context.quadraticCurveTo(this._x, this._y, this._x, mYb); | |
| this._context.lineTo(this._x, mYa); | |
| this._context.quadraticCurveTo(this._x, y, this._x + xN, y); | |
| this._context.lineTo(x-xN, y); | |
| //this._context.quadraticCurveTo(x, y, x, mY); | |
| } else { | |
| var x1 = this._x * (1 - this._t) + x * this._t; | |
| this._context.moveTo(x1, this._y); | |
| this._context.lineTo(x1, y); | |
| } | |
| break; | |
| } | |
| } | |
| this._x = x, this._y = y; | |
| } | |
| }; | |
| stepRound = function(context) { | |
| return new Step(context); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment