d3 x3dom axes

Demo for d3-x3dom-axis

forked from fabid's block: d3 x3dom axes

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://x3dom.org/download/1.7/x3dom.js"></script>
  
  <script src="d3-x3dom-axis.min.js"></script>
  <link rel="stylesheet", href="https://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;}
    svg.svg_mui {background: yellow; }
  </style>
</head>

<body>
  <script>
  var makeSolid =  function(selection, color) {
  	selection.append("appearance")
      .append("material")
      .attr("diffuseColor", color || 	"darkgray");
  	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', 'zAxis')
  	.call(zAxis)
  	.select('.domain').call(makeSolid, 'green');

// add disableRotation option
var validParams = array_to_object([
  // ...
  'disableRotation',
  // ...
]);

// disable rotation onDrag
x3dom.Viewarea.prototype.onDrag = function (x, y, buttonState) {
  // ...
  if (this._doc.properties.getProperty('disableRotation', 'false') === 'true' && buttonState === 1) {
    return;
  }
}

// append this to your x3d tag
x3d.append("param")
   .attr("name", "disableRotation")
   .attr("value", "false");

// 90 deg rotation around the y-axis (up/down)
//x3d.append("Transform")
//  .attr("rotation", '0 1 0 1.5708')

//----------------------------------  
  var data = [
  {
    label: 'foo',
    amount: 1
  },
  {
    label: 'bar',
    amount: 1
  },
  {
    label: 'lol',
    amount: 1
  }
	];
 
var mrects = []
var mui_width = 30;
var mui_height = 30;
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var svg =	d3.select("body").append('svg')
		//.attr("fill","green")
  	.attr("width", mui_width+3)
    .attr("height", ((mui_height+3)*data.length))
    .attr("transform", "translate(width,0)")
  	.attr('class', 'svg_mui');
/*