Public
Edited
May 10, 2023
Insert cell
Insert cell
Insert cell
Insert cell
lineLinear = d3.line().curve(curveLinear)([[0, 50], [100, 50], [100, 100], [200, 100]])
Insert cell
Insert cell
lineArc = d3.line().curve(curveArc)([[0, 50], [100, 50], [100, 100], [200, 100]])
Insert cell
Insert cell
lineArc2 = d3.line().curve(curveLinear)([[0, 50], [100, 50], [100, 55], [200, 55]])
Insert cell
Insert cell
class CurveArc {
constructor(context) {
this._context = context;
}

lineStart() {
this._index = 0;

// [[0, 50], [100, 50], [100, 100], [200, 100]]
this._context.moveTo(0, 50);

this._context.lineTo(100 - 5, 50);
this._context.arcTo(100, 50, 100, 50 + 5, 5);
this._context.lineTo(100, 100 - 5);
this._context.arcTo(100, 100, 100 + 5, 100, 5);
this._context.lineTo(200, 100);
}
lineEnd() {}

point(x, y) {
x = +x, y = +y;
if (this._index === 0) {
this._context.moveTo(x, y);
} else if (this.index === 1) {
//const dx = Math.sign(x - this._x0) * 5
//const dy = Math.sign(y - this._y0) * 5
//this._context.lineTo(x - dx, y - dy);
//this.dx0 = dx;
//this.dy0 = dy;
}
else {
const dx = Math.sign(x - this._x0) * 5
const dy = Math.sign(y - this._y0) * 5
//this._context.arcTo(, 5, 0, 0, 0, x + this.dx0, y + this.dy0);
//this._context.lineTo(this._x0, this._y0);
//this._context.lineTo(x - dx, y - dy);
this.dx0 = dx;
this.dy0 = dy;
}
this._x0 = x;
this._y0 = y;
this._index += 1;
}
}
Insert cell
function curveArc(context) {
return new CurveArc(context);
}
Insert cell
Insert cell
class CurveLinear {
constructor(context) {
this._context = context;
}
lineStart() {
this._index = 0;
}
lineEnd() {}
point(x, y) {
x = +x, y = +y;
if (this._index === 0) {
this._context.moveTo(x, y);
} else {
this._context.lineTo(x, y);
}
this._x0 = x;
this._y0 = y;
this._index += 1;
}
}

Insert cell
function curveLinear(context) {
return new CurveLinear(context);
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more