使用d3的x，y和z轴条形图

Question

我想使用d3.js生成一个带x，y和z轴的简单条形图。我找不到任何方法。应该使用x，y和z轴的值绘制图形，并且应该是3d格式。

我将散点图代码转换为bar.But我只得到小盒子。我无法增加它的长度。我想要一个图形，使得条形应该从底部加载。请帮助

enter code here









function scatterPlot3d( parent )
{


      x3d = d3.select("body")
      .append("x3d")
     .style( "width", parseInt(parent.style("width"))+"px" )
      .style( "height", parseInt(parent.style("height"))+"px" )
      .style( "border", "none" )
      ;




var scene = x3d.append("scene")
scene.append("orthoviewpoint")

     .attr( "fieldOfView", [-5, -5, 15, 15])
     .attr( "orientation", [-0.5, 1, 0.2, 1.12*Math.PI/4])
     .attr( "position", [8, 4, 15])
var count=0;
  var rows = initializeDataGrid();
  var axisRange = [0, 10];
  var scales = [];
  var initialDuration = 0;
 var defaultDuration = 800;

  var time = 0;
  var axisKeys = ["x", "y", "z"]


  function axisName( name, axisIndex ) {
    return ['x','y','z'][axisIndex] + name;
  }




 function constVecWithAxisValue( otherValue, axisValue, axisIndex ) {
    var result = [otherValue, otherValue, otherValue];
    result[axisIndex] = axisValue;
    return result;
  }


  function makeSolid(selection, color) {
    selection.append("appearance")
      .append("material")
         .attr("diffuseColor", color||"black")
    return selection;
  }


  function initializePlot() {
    initializeAxis(0);
    initializeAxis(1);
    initializeAxis(2);
  }

  function initializeAxis( axisIndex )
  {
    var key = axisKeys[axisIndex];
    drawAxis( axisIndex, key, initialDuration );

    var scaleMin = axisRange[0];
    var scaleMax = axisRange[1];


    var newAxisLine = scene.append("transform")
         .attr("class", axisName("Axis", axisIndex))
         .attr("rotation", ([[0,0,0,0],[0,0,1,Math.PI/2],[0,1,0,-Math.PI/2]][axisIndex]))
      .append("shape")
    newAxisLine
      .append("appearance")
      .append("material")
        .attr("emissiveColor", "gray")
    newAxisLine
      .append("polyline2d")


        .attr("lineSegments", "0 0," + scaleMax + " 0")

   var newAxisLabel = scene.append("transform")
       .attr("class", axisName("AxisLabel", axisIndex))
       .attr("translation", constVecWithAxisValue( 0, scaleMin + 1.1 * (scaleMax-scaleMin), axisIndex ))

   var newAxisLabelShape = newAxisLabel
     .append("billboard")
       .attr("axisOfRotation", "0 0 0") // face viewer
     .append("shape")
     .call(makeSolid)

   var labelFontSize = 0.6;

   newAxisLabelShape
     .append("text")
       .attr("class", axisName("AxisLabelText", axisIndex))
       .attr("solid", "true")
       .attr("string", key)
    .append("fontstyle")
       .attr("size", labelFontSize)
       .attr("family", "SANS")
       .attr("justify", "END MIDDLE" )
  }


  function drawAxis( axisIndex, key, duration ) {

    var scale = d3.scale.linear()
      .domain( [-5,5] ) // demo data range
      .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 // enter + update
      .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 plotData( duration ) {

    if (!rows) {
     console.log("no rows to plot.")
     return;
    }

    var x = scales[0], y = scales[1], z = scales[2];

    var sphereRadius = 0.2;



    var datapoints = scene.selectAll(".datapoint").data( rows );
    datapoints.exit().remove()
    shapesEnter = datapoints
    .enter()
    .append( "transform" ).attr("class", "datapoint")
    .append( "shape" )
    ;

    shapesEnter
    .append("appearance")
      .append("material")
      .attr("diffuseColor", "steelblue" );

shapesEnter.append( "box" )
.attr( "size", "0.4 0.4 0.4" );  
datapoints.transition().duration(2000)
.attr("translation", function(row) { 
  return x(row[axisKeys[0]]) + " " + y(row[axisKeys[1]]) + " " + z(row[axisKeys[2]])})
 ;



  }
  function initializeDataGrid() {
    var rows = [];
    // Follow the convention where y(x,z) is elevation.
    for (var x=-5; x<=5; x+=4) {
      for (var z=-5; z<=5; z+=4) {
        rows.push({x: x, y: 0, z: z});
     }
    }
    return rows;
  }




function updateData() {

      alert(time)
    time += Math.PI/8;

    if ( x3d.node() && x3d.node().runtime ) {
      for (var r=0; r<rows.length; ++r) {


        var x = rows[r].x;

        var z = rows[r].z;

       rows[r].y = 5*( Math.sin(0.5*x + time) * Math.cos(0.25*z + time));


      }
      plotData( defaultDuration );

    } else {
      console.log('x3d not ready.');
    }

  }

  initializeDataGrid();
  initializePlot();


 var timeout=setInterval( updateData, defaultDuration );

  setTimeout(function( ) { clearInterval( timeout ); }, 1000);
}