Niekes / d3-3d

d3-3d is a powerful JavaScript library designed for 3D visualizations, specifically tailored to work seamlessly with d3.js. This library enables the projection of 3D data onto web browsers, making it an essential tool for developers interested in creating immersive and dynamic visualizations.
BSD 3-Clause "New" or "Revised" License
352 stars 34 forks source link

Adding ellipses? #4

Open mbailen opened 6 years ago

mbailen commented 6 years ago

Just started playing with your code. It's great. Is there a simple way to add ellipses (ovals) with what you have? I was thinking of adding a new "draw" type?

Thanks!

mbailen commented 6 years ago

I got this. . . the 3D stuff works well with bezier curves. Here is an ellipse function and a draw function. I can explain more if somebody is interested. . .

function ellipse(ellipses, options, point, angles){ for (var i = ellipses.length - 1; i >= 0; i--) { var ell = ellipses[i]; var p1 = ell[0]; //start
var p2 = ell[1]; //ctrl pt 1
var p3 = ell[2]; //ctrl pt 2
var p4 = ell[3]; //end
var p5 = ell[4]; //ctrl pt 3
var p6 = ell[5]; //ctrl pt 4
p1.rotated = rotateRzRyRx({x : point.x(p1), y : point.y(p1), z : point.z(p1)}, angles); p2.rotated = rotateRzRyRx({x : point.x(p2), y : point.y(p2), z : point.z(p2)}, angles); p3.rotated = rotateRzRyRx({x : point.x(p3), y : point.y(p3), z : point.z(p3)}, angles); p4.rotated = rotateRzRyRx({x : point.x(p4), y : point.y(p4), z : point.z(p4)}, angles); p5.rotated = rotateRzRyRx({x : point.x(p5), y : point.y(p5), z : point.z(p5)}, angles); p6.rotated = rotateRzRyRx({x : point.x(p6), y : point.y(p6), z : point.z(p6)}, angles); p1.projected = options.project(p1.rotated, options); p2.projected = options.project(p2.rotated, options); p3.projected = options.project(p3.rotated, options); p4.projected = options.project(p4.rotated, options); p5.projected = options.project(p5.rotated, options); p6.projected = options.project(p6.rotated, options); ellipse.centroid = centroid([ell[0],ell[3]]); } return ellipses; }


function drawEllipse(d){ return 'M' + d[0].projected.x + ' ' + d[0].projected.y + ' C ' + d[1].projected.x + ' ' + d[1].projected.y +\ ',' + d[2].projected.x + ' ' + d[2].projected.x + ',' + d[3].projected.x + ' ' + d[3].projected.y + ' C ' + d[4\ ].projected.x + ' ' + d[4].projected.y + ',' + d[5].projected.x + ' ' + d[5].projected.y + ',' + d[0].projected.\ x + ' ' + d[0].projected.y; }

Niekes commented 6 years ago

Hey, can you provide a working example? Without any code highlighting it is hard to read.