hive/html/d3js/scatter_plot_3d.js
// Assign key to axis, creating or updating its ticks, grid lines, and labels.
Assign key to axis, creating or updating its ticks, grid lines, and labels.
Assign key to axis creating or updating its ticks grid lines and labels .
function drawAxis( axisIndex, key, duration ) {
    var scale = d3.scale.linear()
      .domain( [-5,5] ) 
      .range( axisRange )
    scales[axisIndex] = scale;
    var numTicks = 8;
    var tickSize = 0.1;
    var tickFontSize = 0.5;
    var ticks = scene.selectAll( "."+axisName("Tick", axisIndex) )
       .data( scale.ticks( numTicks ));
    var newTicks = ticks.enter()
      .append("transform")
        .attr("class", axisName("Tick", axisIndex));
    newTicks.append("shape").call(makeSolid)
      .append("box")
        .attr("size", tickSize + " " + tickSize + " " + tickSize);
    ticks.transition().duration(duration)
      .attr("translation", function(tick) { 
         return constVecWithAxisValue( 0, scale(tick), axisIndex ); })
    ticks.exit().remove();
    var tickLabels = ticks.selectAll("billboard shape text")
      .data(function(d) { return [d]; });
    var newTickLabels = tickLabels.enter()
      .append("billboard")
         .attr("axisOfRotation", "0 0 0")     
      .append("shape")
      .call(makeSolid)
    newTickLabels.append("text")
      .attr("string", scale.tickFormat(10))
      .attr("solid", "true")
      .append("fontstyle")
        .attr("size", tickFontSize)
        .attr("family", "SANS")
        .attr("justify", "END MIDDLE" );
    tickLabels 
      .attr("string", scale.tickFormat(10))
    tickLabels.exit().remove();
    if (axisIndex==0 || axisIndex==2) {
      var gridLines = scene.selectAll( "."+axisName("GridLine", axisIndex))
         .data(scale.ticks( numTicks ));
      gridLines.exit().remove();
      var newGridLines = gridLines.enter()
        .append("transform")
          .attr("class", axisName("GridLine", axisIndex))
          .attr("rotation", axisIndex==0 ? [0,1,0, -Math.PI/2] : [0,0,0,0])
        .append("shape")
      newGridLines.append("appearance")
        .append("material")
          .attr("emissiveColor", "gray")
      newGridLines.append("polyline2d");
      gridLines.selectAll("shape polyline2d").transition().duration(duration)
        .attr("lineSegments", "0 0, " + axisRange[1] + " 0")
      gridLines.transition().duration(duration)
         .attr("translation", axisIndex==0
            ? function(d) { return scale(d) + " 0 0"; }
            : function(d) { return "0 0 " + scale(d); }
          )
    }  
  }
function drawAxis ( axisIndex , key , duration ) { var scale = d3 . scale . linear ( ) . domain ( [ - 5 , 5 ] ) . range ( axisRange ) scales [ axisIndex ] = scale ; var numTicks = 8 ; var tickSize = 0.1 ; var tickFontSize = 0.5 ; var ticks = scene . selectAll ( "." + axisName ( "Tick" , axisIndex ) ) . data ( scale . ticks ( numTicks ) ) ; var newTicks = ticks . enter ( ) . append ( "transform" ) . attr ( "class" , axisName ( "Tick" , axisIndex ) ) ; newTicks . append ( "shape" ) . call ( makeSolid ) . append ( "box" ) . attr ( "size" , tickSize + " " + tickSize + " " + tickSize ) ; ticks . transition ( ) . duration ( duration ) . attr ( "translation" , function ( tick ) { return constVecWithAxisValue ( 0 , scale ( tick ) , axisIndex ) ; } ) ticks . exit ( ) . remove ( ) ; var tickLabels = ticks . selectAll ( "billboard shape text" ) . data ( function ( d ) { return [ d ] ; } ) ; var newTickLabels = tickLabels . enter ( ) . append ( "billboard" ) . attr ( "axisOfRotation" , "0 0 0" ) . append ( "shape" ) . call ( makeSolid ) newTickLabels . append ( "text" ) . attr ( "string" , scale . tickFormat ( 10 ) ) . attr ( "solid" , "true" ) . append ( "fontstyle" ) . attr ( "size" , tickFontSize ) . attr ( "family" , "SANS" ) . attr ( "justify" , "END MIDDLE" ) ; tickLabels . attr ( "string" , scale . tickFormat ( 10 ) ) tickLabels . exit ( ) . remove ( ) ; if ( axisIndex == 0 || axisIndex == 2 ) { var gridLines = scene . selectAll ( "." + axisName ( "GridLine" , axisIndex ) ) . data ( scale . ticks ( numTicks ) ) ; gridLines . exit ( ) . remove ( ) ; var newGridLines = gridLines . enter ( ) . append ( "transform" ) . attr ( "class" , axisName ( "GridLine" , axisIndex ) ) . attr ( "rotation" , axisIndex == 0 ? [ 0 , 1 , 0 , - Math . PI / 2 ] : [ 0 , 0 , 0 , 0 ] ) . append ( "shape" ) newGridLines . append ( "appearance" ) . append ( "material" ) . attr ( "emissiveColor" , "gray" ) newGridLines . append ( "polyline2d" ) ; gridLines . selectAll ( "shape polyline2d" ) . transition ( ) . duration ( duration ) . attr ( "lineSegments" , "0 0, " + axisRange [ 1 ] + " 0" ) gridLines . transition ( ) . duration ( duration ) . attr ( "translation" , axisIndex == 0 ? function ( d ) { return scale ( d ) + " 0 0" ; } : function ( d ) { return "0 0 " + scale ( d ) ; } ) } }
Assign key to axis, creating or updating its ticks, grid lines, and labels.
Assign key to axis creating or updating its ticks grid lines and labels .
// demo data range // ticks along each axis // enter + update // tick labels // enter + update // base grid lines