Skip to content
Snippets Groups Projects
Commit 1539d18c authored by wonko's avatar wonko
Browse files

Refactored to look like d3.pie and d3.arc

parent eb80a32c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 23
− 9
View file @ 1539d18c
...@@ -22,22 +22,36 @@ ...@@ -22,22 +22,36 @@
<body> <body>
<div id='arrows'></div> <div id='arrows' style="width:30px;"></div>
<script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script>
<script src="dist/d3-cyclicarrow.js"></script> <script src="dist/d3-cyclicarrow.js"></script>
<script> <script>
d3.svg('path.svg').then(function (svg) {
// Create dummy data
var data = ["first", "second", "third", "fourth"];
var arr = d3.cyclicarrow()(data);
console.log(d3.entries(arr));
d3.svg('path.svg').then(function (svg) {
svgnode = document.importNode(svg.documentElement, true); svgnode = document.importNode(svg.documentElement, true);
console.log(svgnode);
d3.select("div#arrows").node().append(svgnode); d3.select("div#arrows").node().append(svgnode);
console.log('sss'); svg = d3.select("div#arrows svg");
bh = d3.cyclicarrow()([]);
console.log(bh); console.log(svg);
console.log('aaa'); svg.selectAll("whatever")
.data(arr)
.enter()
.append('path')
.attr('d', d3.arrowonpath());
//bh = d3.cyclicarrow()([]);
//console.log(bh);
}); });
</script> </script>
</body> </body>
\ No newline at end of file
src/arrowonpath.js
+ 68
− 52
View file @ 1539d18c
...@@ -17,102 +17,118 @@ function controlPoints(x) { ...@@ -17,102 +17,118 @@ function controlPoints(x) {
for (i = 0; i < n - 1; ++i) b[i] = 2 * x[i + 1] - a[i + 1]; for (i = 0; i < n - 1; ++i) b[i] = 2 * x[i + 1] - a[i + 1];
return [a, b]; return [a, b];
} }
function svgpath() {
var circularSvg = d3.select("svg"), // Move out of here it doesnt belong
export default class ArrowOnPath { circularPath = circularSvg.select("path").node();
constructor(path, start, end, parts = 3, thickness = 5, angle = 2, padding = 1) { return circularPath;
this.path = path; };
this.angle = angle;
this.thickness = thickness; export default function () {
var length = end - start; var parts = 3,
var partlen = (length - (2 * padding)) / (2 * parts); thickness = 5,
console.log("ArrowOnPath", start, end, partlen); angle = 2,
this.p = [this.pointsAt(start + padding, (-1 * padding))]; padding = 1,
for (var i = 1; i < (2 * parts); i++) { path = svgpath(),
this.p.push(this.pointsAt(start + (i * partlen))); path_l = path.getTotalLength(),
}
this.p.push(this.pointsAt(start + length - padding, (1 * padding))); context = null;
}
pointAngle(length) { function pointAngle(length) {
var p1 = this.path.getPointAtLength(length); var p1 = path.getPointAtLength(length);
var p2 = this.path.getPointAtLength(length + 0.01); var p2 = path.getPointAtLength(length + 0.01);
if (p1.x == p2.x && p1.y == p2.y) { if (p1.x == p2.x && p1.y == p2.y) {
p1 = this.path.getPointAtLength(length - 0.01); p1 = path.getPointAtLength(length - 0.01);
} }
console.log(p1, p2); console.log(p1, p2);
return Math.atan2((p2.y - p1.y), (p2.x - p1.x)); return Math.atan2((p2.y - p1.y), (p2.x - p1.x));
} }
pointsAt(length, angleoffset = 0) {
var m = this.path.getPointAtLength(length); function pointsAt(length, angleoffset = 0) {
var m_angle = this.pointAngle(length + angleoffset) var m = path.getPointAtLength(length);
var m_angle = pointAngle(length + angleoffset)
console.log("a", m_angle); console.log("a", m_angle);
var a = { var a = {
x: m.x + (this.thickness * Math.cos(m_angle + this.angle)) x: m.x + (thickness * Math.cos(m_angle + angle))
, y: m.y + (this.thickness * Math.sin(m_angle + this.angle)) , y: m.y + (thickness * Math.sin(m_angle + angle))
}; };
var b = { var b = {
x: m.x + (this.thickness * Math.cos(m_angle - this.angle)) x: m.x + (thickness * Math.cos(m_angle - angle))
, y: m.y + (this.thickness * Math.sin(m_angle - this.angle)) , y: m.y + (thickness * Math.sin(m_angle - angle))
}; };
return { a: a, m: m, b: b } return { a: a, m: m, b: b }
} }
p2s(point) {
return point.x.toString() + "," + point.y.toString(); function arrowonpath() {
} var buffer,
start = path_l * arguments[0].start,
end = path_l * arguments[0].end,
length = end - start,
partlen = (length - (2 * padding)) / (2 * parts);
console.log("ArrowOnPath", start, end, partlen);
if (!context) context = buffer = d3.path();
var p = [pointsAt(start + padding, (-1 * padding))];
for (var i = 1; i < (2 * parts); i++) {
p.push(pointsAt(start + (i * partlen)));
}
p.push(pointsAt(start + length - padding, (1 * padding)));
d3path() {
var path = d3.path();
var i = 0 var i = 0
path.moveTo(this.p[i].m.x, this.p[i].m.y); context.moveTo(p[i].m.x, p[i].m.y);
path.lineTo(this.p[i].a.x, this.p[i].a.y); context.lineTo(p[i].a.x, p[i].a.y);
var nat = d3.curveNatural(path); var nat = d3.curveNatural(context);
nat.lineStart(); nat.lineStart();
for (var i = 0; i < this.p.length; i++) { for (var i = 0; i < p.length; i++) {
nat.point(this.p[i].a.x, this.p[i].a.y); nat.point(p[i].a.x, p[i].a.y);
} }
var px = controlPoints(nat._x), var px = controlPoints(nat._x),
py = controlPoints(nat._y); py = controlPoints(nat._y);
var n = this.p.length; var n = p.length;
var x = nat._x, var x = nat._x,
y = nat._y; y = nat._y;
for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) { for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
path.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]); context.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);
} }
i = this.p.length - 1; i = p.length - 1;
path.lineTo(this.p[i].m.x, this.p[i].m.y); context.lineTo(p[i].m.x, p[i].m.y);
path.lineTo(this.p[i].b.x, this.p[i].b.y); context.lineTo(p[i].b.x, p[i].b.y);
nat.lineStart(); nat.lineStart();
for (var i = this.p.length - 1; i >= 0; --i) { for (var i = p.length - 1; i >= 0; --i) {
nat.point(this.p[i].b.x, this.p[i].b.y); nat.point(p[i].b.x, p[i].b.y);
} }
var px = controlPoints(nat._x), var px = controlPoints(nat._x),
py = controlPoints(nat._y); py = controlPoints(nat._y);
var n = this.p.length; var n = p.length;
var x = nat._x, var x = nat._x,
y = nat._y; y = nat._y;
for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) { for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
path.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]); context.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);
} }
path.closePath(); context.closePath();
return path; if (buffer) return context = null, buffer + "" || null;
}
toString() {
return this.d3path().toString();
} }
arrowonpath.svgpath = function (_) {
return arguments.length ? (svgpath = typeof _ === "function" ? _ : constant(+_), arrowonpath) : svgpath;
};
return arrowonpath;
} }
src/cyclicarrow.js
+ 13
− 32
View file @ 1539d18c
import constant from "./constant.js"; import constant from "./constant.js";
import ArrowOnPath from "./arrowonpath.js";
function getRandomColorRgb() {
let red = Math.floor(Math.random() * 256);
let green = Math.floor(Math.random() * 256);
let blue = Math.floor(Math.random() * 256);
return `rgb(${red}, ${green}, ${blue})`;
}
export default function () { export default function () {
console.log('ssksk'); //var value =
var arrowParts = constant(3), //TODO implement the ability for arrow length bsed on value like in d3.pie
arrowThickness = constant(5),
arrowAngle = constant(2),
arrowPadding = constant(1),
output = null,
circularSvg = d3.select("svg"), // Move out of here it doesnt belong
circularPath = circularSvg.select("path").node();
console.log('ezteze');
function cyclicarrow(data) { function cyclicarrow(data) {
console.log('blah'); var fractions = data.length,
var l = circularPath.getTotalLength(); seg = 1 / fractions,
var segs = 8; segments = new Array(fractions);
var seg_l = l / segs;
console.log(l, seg_l) for (var i = 0; i < fractions; i++) {
for (var i = 0; i < segs; i++) { segments[i] = {
var start = i * seg_l; start: i * seg,
var end = (i + 1) * seg_l; end: (i + 1) * seg
console.log(i, start, start); }
var ar = new ArrowOnPath(circularPath, start, end);
circularSvg.append("path")
.attr("d", ar.toString())
.attr("style", "fill:" + getRandomColorRgb());
} }
return segments;
} }
cyclicarrow.arrowAngle = function (_) {
return arguments.length ? (arrowAngle = typeof _ === "function" ? _ : constant(+_), cyclicarrow) : arrowAngle;
};
return cyclicarrow; return cyclicarrow;
} }
src/index.js
+ 1
− 0
View file @ 1539d18c
export {default as cyclicarrow} from "./cyclicarrow.js"; export {default as cyclicarrow} from "./cyclicarrow.js";
export {default as arrowonpath } from "./arrowonpath.js";
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment