Skip to content

Instantly share code, notes, and snippets.

@fabid

fabid/README.md

Last active September 27, 2018 22:39
Show Gist options
  • Save fabid/61cbfe14de686cc25c47 to your computer and use it in GitHub Desktop.
Save fabid/61cbfe14de686cc25c47 to your computer and use it in GitHub Desktop.
Download ZIP
d3 x3dom axes
Raw
README.md
Raw
d3-x3dom-axis.min.js
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3_x3dom_axis=t.d3_x3dom_axis||{})}(this,function(t){"use strict";function n(t,n,e){function l(a){function l(t){var n;switch(t){case"x":n=[1,0,0];break;case"y":n=[0,1,0];break;case"z":n=[0,0,1]}return n}function d(t){var n;switch(t){case"x":n=[1,1,0,Math.PI];break;case"y":n=[0,0,0,0];break;case"z":n=[0,1,1,Math.PI]}return n}var f,m,h,k,g=null==c?e.ticks?e.ticks.apply(e,o):e.domain():c,y=null==s?e.tickFormat?e.tickFormat.apply(e,o):r:s,x=e.range(),b=x[0],v=x[x.length-1],j=a.selection?a.selection():a;f=l(t),h=l(n),m=d(t),k=d(n);var A=j.selectAll("transform").data([null]),z=j.selectAll(".tick").data(g,e).order(),L=z.exit(),_=z.enter().append("transform").attr("translation",function(t){return f.map(function(n){return e(t)*n}).join(" ")}).attr("class","tick"),D=z.select(".tickLine"),F=z.select("billboard");A=A.merge(A.enter().append("transform").attr("rotation",m.join(" ")).attr("translation",f.map(function(t){return t*(b+v)/2}).join(" ")).append("shape").call(i).attr("class","domain")),z=z.merge(_),D=D.merge(_.append("transform"));var I=_.append("transform");I.attr("translation",h.map(function(t){return-t*p})).append("billboard").attr("axisOfRotation","0 0 0").append("shape").call(i).append("text").attr("string",y).append("fontstyle").attr("size",1).attr("family","SANS").attr("style","BOLD").attr("justify","MIDDLE "),F=F.merge(I),L.remove(),A.append("cylinder").attr("radius",.1).attr("height",v-b),D.attr("translation",h.map(function(t){return t*u/2}).join(" ")).attr("rotation",k.join(" ")).attr("class","tickLine").append("shape").call(i).append("cylinder").attr("radius",.05).attr("height",u)}var o=[],c=null,s=null,u=1,p=1;return l.scale=function(t){return arguments.length?(e=t,l):e},l.ticks=function(){return o=a.call(arguments),l},l.tickArguments=function(t){return arguments.length?(o=null==t?[]:a.call(t),l):o.slice()},l.tickValues=function(t){return arguments.length?(c=null==t?null:a.call(t),l):c&&c.slice()},l.tickFormat=function(t){return arguments.length?(s=t,l):s},l.tickSize=function(t){return arguments.length?(u=+t,l):u},l.tickPadding=function(t){return arguments.length?(p=+t,l):p},l}var e="0.0.1",a=Array.prototype.slice,r=function(t){return t},i=function(t,n){return t.append("appearance").append("material").attr("diffuseColor",n||"black"),t};t.version=e,t.x3domAxis=n});
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://x3dom.org/download/1.7/x3dom.js"></script>
<script src="//d3js.org/d3.v4.0.0-alpha.28.min.js"></script>
<script src="d3-x3dom-axis.min.js"></script>
<link rel="stylesheet", href="http://x3dom.org/download/1.7/x3dom.css" type="text/css" inline>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background: #fcfcfc}
canvas {background: white;}
</style>
</head>
<body>
<script>
var makeSolid = function(selection, color) {
selection.append("appearance").append("material").attr("diffuseColor", color || "black");
return selection;
}
var width = 800, height = 400;
var x3d = d3.select("body").append("x3d")
.attr("width", width + 'px')
.attr("height", height +'px' );
d3.select('.x3dom-canvas')
.attr("width", 2 * width)
.attr("height", 2 * height);
var x = d3.scaleLinear().range([0, 40]);
var y = d3.scaleLinear().range([0, 40]);
var z = d3.scaleLinear().range([0, 40]);
var xAxis = d3_x3dom_axis.x3domAxis('x', 'z', x).tickSize(z.range()[1] - z.range()[0]).tickPadding(y.range()[0]);;
var yAxis = d3_x3dom_axis.x3domAxis('y', 'z', y).tickSize(z.range()[1] - z.range()[0]);
var yAxis2 = d3_x3dom_axis.x3domAxis('y', 'x', y).tickSize(x.range()[1] - x.range()[0]).tickFormat(function(d){return ''});
var zAxis = d3_x3dom_axis.x3domAxis('z', 'x', y).tickSize(x.range()[1] - x.range()[0]);
var scene = x3d.append("scene");
var view_pos = [80, 25, 80];
var fov = 0.8;
var view_or = [0, 1, 0, 0.8];
scene.append("viewpoint")
.attr("id", 'dvp')
.attr("position", view_pos.join(" "))
.attr("orientation", view_or.join(" "))
.attr("fieldOfView", fov)
.attr("description", "defaultX3DViewpointNode").attr("set_bind", "true");
scene.append('group')
.attr('class', 'xAxis')
.call(xAxis)
.select('.domain').call(makeSolid, 'blue');
scene.append('group')
.attr('class', 'yAxis')
.call(yAxis)
.select('.domain').call(makeSolid, 'red');
scene.append('group')
.attr('class', 'yAxis')
.call(yAxis2)
.select('.domain').call(makeSolid, 'red');
scene.append('group')
.attr('class', 'zAxis')
.call(zAxis)
.select('.domain');
</script>
</body>
@jamesleesaunders
Copy link

Hi @fabid I just wanted to reach out to say a huge thank you for your D3 X3DOM Axis example.

I have been working on a D3 X3DOM library which encorporates elements of your original axis example above into my library called ‘d3-x3d’:
https://github.com/jamesleesaunders/d3-x3d

Out of courtesy, I also really wanted to check you are ok with, and ask for your blessing for, me having encorporated parts of your axis and surface area code in the d3-x3d library? I have added credit to you in the README.

If you have any questions or concerns please do not hesitate to ask. And, if you were interested, I would very much be honoured if you maybe wanted to contribute further to d3-x3d!

All the best, J

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment