D3 Examples - d3 x3dom axes

xxxxxxxxxx
 
<!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="//d3js.org/d3.v4.0.0-alpha.28.min.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');
/*
​
var x = d3.scaleLinear()
  .range([0, 300])
  .domain([0, maxCount]);
var y = d3.scaleOrdinal()
  .rangeRoundBands([0, 75])
  .domain(sales.map(function(d, i) {
    return d.product;
  }));
*/
 svg.append('g')
    .attr('class', 'mui')
        .selectAll('rect').data(data).enter()
    .append('rect')
    .attr('x', x(0))
    .attr('y', function(d, i) {
        return (i*(mui_height+3));
    })
    .attr('height', (mui_height))
    .attr('width', (mui_width))
    .attr('fill',function(d, i) { return color(i)} );
​
  </script>
</body>
​
    