Skip to content

Instantly share code, notes, and snippets.

@Niekes

Niekes/.block

Last active August 10, 2017 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Niekes/ff4d3c8497d8436d4d8fdb9f0121d12d to your computer and use it in GitHub Desktop.
Save Niekes/ff4d3c8497d8436d4d8fdb9f0121d12d to your computer and use it in GitHub Desktop.
Download ZIP
d3-3d: First test
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
d3-3d.js
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-shape")):"function"==typeof define&&define.amd?define(["exports","d3-shape"],e):e(t.d3=t.d3||{},t.d3)}(this,function(t,e){"use strict";function r(t,e,r,n){var o=Math.cos(e),u=Math.sin(e),i=Math.cos(r),a=Math.sin(r),d=Math.cos(n),f=Math.sin(n),c=o*a*f-u*d,h=o*a*d+u*f,p=u*i,y=u*a*f+o*d,x=u*a*d-o*f,l=-a,s=i*f,g=i*d;return{x:o*i*t.x+c*-t.y+h*t.z,y:p*t.x+y*-t.y+x*t.z,z:l*t.x+s*-t.y+g*t.z}}function n(t,e,r,n,o){return e===p.ortho?{x:r[0]+n*t.x,y:r[1]+n*t.y}:e===p.persp?{x:r[0]+n*t.x/(t.z+o),y:r[1]+n*t.y/(t.z+o)}:void 0}function o(t,e,o,u,i,a,d,f){for(var c=t.length-1;c>=0;c--){var h=t[c];h.rotated=r({x:h.x,y:h.y,z:h.z},o,u,i),h.projected=n(h.rotated,e,a,d,f)}return t}function u(t,e,o,u,i,a,d,f){for(var c=t.length-1;c>=0;c--){var h=t[c],p=h[0],y=h[1];p.rotated=r({x:p.x,y:p.y,z:p.z},o,u,i),y.rotated=r({x:y.x,y:y.y,z:y.z},o,u,i),p.projected=n(p.rotated,e,a,d,f),y.projected=n(y.rotated,e,a,d,f),h.lng=Math.sqrt(Math.pow(y.rotated.x-p.rotated.x,2)+Math.pow(y.rotated.y-p.rotated.y,2)+Math.pow(y.rotated.z-p.rotated.z,2)),h.midPoint={x:(p.x+y.x)/2,y:(p.y+y.y)/2,z:(p.z+y.z)/2}}return t}function i(t,e,r,n,o,u,i,a){for(var d=t.length-1;d>=0;d--);return t}function a(t,e,r,n,o,u,i,a){for(var d=t.length-1;d>=0;d--);return t}function d(t,e,r,n,o,u,i,a){for(var d=t.length-1;d>=0;d--);return t}function f(t,e,r,n,o,u,i,a){for(var d=t.length-1;d>=0;d--);return t}function c(t,e,r,n,o,u,i,a){for(var d=t.length-1;d>=0;d--);return t}function h(t){return e.line()([[t[0].projected.x,t[0].projected.y],[t[1].projected.x,t[1].projected.y]])}e="default"in e?e.default:e;var p={ortho:"ortho",persp:"persp"},y=function(){function t(t){return z[v](t,r,l,s,g,n,y,x)}var e=p.ortho,r=(p.persp,e),n=[0,0],y=1,x=1,l=0,s=0,g=0,v="POINTS",z={POINTS:o,LINES:u,LINES_LOOP:i,LINES_STRIP:a,TRIANGLES:d,TRIANGLES_STRIP:f,TRIANGLES_FAN:c},I={POINTS:void 0,LINES:h};return t.projection=function(e){return arguments.length?(r=e,t):r},t.origin=function(e){return arguments.length?(n=e,t):n},t.scale=function(e){return arguments.length?(y=e,t):y},t.distance=function(e){return arguments.length?(x=e,t):x},t.rotateZ=function(e){return arguments.length?(l=e,t):l},t.rotateY=function(e){return arguments.length?(s=e,t):s},t.rotateX=function(e){return arguments.length?(g=e,t):g},t.primitiveType=function(e){return arguments.length?(v=e,t):v},t.draw=function(t){return"POINTS"===v?void 0:I[v](t)},t};t._3d=y,Object.defineProperty(t,"__esModule",{value:!0})});
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-3d.js"></script>
<body>
<svg width="960" height="500"></svg>
<script>
var origin = [480, 250], startAngle = Math.PI/8, beta = startAngle;
var svg = d3.select('svg').call(d3.drag().on('drag', dragged).on('start', dragStart).on('end', dragEnd)).append('g');
var data = [[{'x':1,'y':1,'z':-1},{'x':-1,'y':1,'z':-1}],[{'x':-1,'y':-1,'z':-1},{'x':1,'y':-1,'z':-1}],[{'x':1,'y':1,'z':-1},{'x':1,'y':-1,'z':-1}],[{'x':-1,'y':1,'z':-1},{'x':-1,'y':-1,'z':-1}],[{'x':1,'y':1,'z':1},{'x':-1,'y':1,'z':1}],[{'x':-1,'y':-1,'z':1},{'x':1,'y':-1,'z':1}],[{'x':1,'y':1,'z':1},{'x':1,'y':-1,'z':1}],[{'x':-1,'y':1,'z':1},{'x':-1,'y':-1,'z':1}],[{'x':-1,'y':1,'z':1},{'x':-1,'y':1,'z':-1},],[{'x':1,'y':1,'z':1},{'x':1,'y':1,'z':-1},],[{'x':-1,'y':-1,'z':1},{'x':-1,'y':-1,'z':-1},],[{'x':1,'y':-1,'z':1},{'x':1,'y':-1,'z':-1},]];
var mx, mouseX;
var _3d = d3._3d()
.scale(50)
.origin(origin)
.rotateX(startAngle)
.rotateY(startAngle)
.primitiveType('LINES');
function dragStart(){
mx = d3.event.x;
}
function dragged(){
mouseX = mouseX || 0;
beta = (d3.event.x - mx + mouseX) * Math.PI / 360 * (-1);
init(_3d.rotateY(beta + startAngle)(data));
}
function dragEnd(){
mouseX = d3.event.x - mx + mouseX;
}
function init(data){
var lines = svg.selectAll('line').data(data);
lines
.enter()
.append('line')
.merge(lines)
.attr('fill', d3.color('black'))
.attr('stroke', d3.color('black'))
.attr('stroke-width', 1)
.attr('x1', function(d){ return d[0].projected.x; })
.attr('y1', function(d){ return d[0].projected.y; })
.attr('x2', function(d){ return d[1].projected.x; })
.attr('y2', function(d){ return d[1].projected.y; });
lines.exit().remove();
}
init(_3d(data));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment