D3.js 使用d3的x、y和z轴条形图

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

我将散点图代码转换为条形图。但我得到的只是小方框。我无法增加其长度。我需要一个从底部加载条形图的图形。请帮助

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);
}

在此处输入代码
函数scatterPlot3d（父级）
{
x3d=d3。选择（“主体”）
.附加（“x3d”）
.style（“宽度”），parseInt（父.style（“宽度”）+“px”）
.style（“高度”），parseInt（父.style（“高度”）+“px”）
.style（“边框”、“无”）
;
var scene=x3d.append（“场景”）
scene.append（“正交视点”）
.attr（“视野范围”[-5，-5,15,15]）
.attr（“方向”，[-0.5,1,0.2,1.12*Math.PI/4]）
.attr（“位置”[8,4,15]）
var计数=0；
var rows=initializeDataGrid（）；
var axisRange=[0,10]；
var标度=[]；
var initialDuration=0；
var defaultDuration=800；
var时间=0；
var axisKeys=[“x”、“y”、“z”]
函数axisName（名称、axisIndex）{
返回['x'，'y'，'z'][axisIndex]+名称；
}
函数constVecWithAxisValue（其他值、axisValue、axisIndex）{
var结果=[otherValue，otherValue，otherValue]；
结果[axisIndex]=axisValue；
返回结果；
}
函数makeSolid（选择、颜色）{
选择。附加（“外观”）
.附加（“材料”）
.attr（“漫反射颜色”，颜色| |“黑色”）
返回选择；
}
函数initializePlot（）{
初始化axis（0）；
初始化Axis（1）；
初始化Axis（2）；
}
函数初始化Axis（axisIndex）
{
var key=axisKeys[axisIndex]；
drawAxis（axisIndex、键、初始持续时间）；
var scaleMin=axisRange[0]；
var scaleMax=axisRange[1]；
var newAxisLine=scene.append（“变换”）
.attr（“类”，axisName（“轴”，axisIndex））
.attr（“旋转”（[0,0,0,0]，[0,0,1，数学PI/2]，[0,1,0，-Math.PI/2]][axisIndex]））
.append（“形状”）
新轴线
.append（“外观”）
.附加（“材料”）
.attr（“发射色”、“灰色”）
新轴线
.append（“polyline2d”）
.attr（“线段”、“0 0、+scaleMax+“0”）
var newAxisLabel=scene.append（“变换”）
.attr（“类”，axisName（“AxisLabel”，axisIndex））
.attr（“translation”，constVecWithAxisValue（0，scaleMin+1.1*（scaleMax scaleMin，axisIndex））
var newAxisLabelShape=newAxisLabel
.附加（“广告牌”）
.attr（“旋转轴”，“0”）//面查看器
.append（“形状”）
.call（makeSolid）
var labelFontSize=0.6；
新轴唇形
.append（“文本”）
.attr（“类”，axisName（“AxisLabelText”，axisIndex））
.attr（“实体”、“真实”）
.attr（“字符串”，键）
.append（“字体样式”）
.attr（“大小”，labelFontSize）
.attr（“家族”、“无组织”）
.attr（“对齐”，“中间结束”）
}
函数drawAxis（axisIndex、键、持续时间）{
var scale=d3.scale.linear（）
.domain（[-5,5]）//演示数据范围
.范围（axisRange）
比例[指数]=比例；
var numTicks=8；
var tickSize=0.1；
var tickFontSize=0.5；
var ticks=scene.selectAll（“.”+axisName（“Tick”，axisIndex））
.数据（刻度刻度刻度（numTicks））；
var newTicks=ticks.enter（）
.append（“转换”）
.attr（“类”，axisName（“勾号”，axisIndex））；
newTicks.append（“shape”）.call（makeSolid）
.附加（“框”）
.attr（“大小”，tickSize+“”+tickSize+“”+tickSize+“”+tickSize）；
ticks.transition（）.duration（持续时间）
.attr（“翻译”，函数（勾号）{
返回constVecWithAxisValue（0，刻度，axisIndex）；}）
ticks.exit（）.remove（）；
var tickLabels=ticks.selectAll（“广告牌形状文本”）
.data（函数（d）{return[d]；}）；
var newTickLabels=tickLabels.enter（）
.附加（“广告牌”）
.attr（“旋转轴”，“0”）
.append（“形状”）
.call（makeSolid）
newTickLabels.append（“文本”）
.attr（“字符串”，比例.tick格式（10））
.attr（“实体”、“真实”）
.append（“字体样式”）
.attr（“大小”，tickFontSize）
.attr（“家族”、“无组织”）
.attr（“合理”、“中间结束”）；
勾选标签//输入+更新
.attr（“字符串”，比例.tick格式（10））
tickLabels.exit（）.remove（）；
如果（axisIndex==0 | | axisIndex==2）{
var gridLines=scene.selectAll（“.”+axisName（“GridLine”，axisIndex））
.数据（刻度刻度刻度（numTicks））；
gridLines.exit（）.remove（）；
var newGridLines=gridLines.enter（）
.append（“转换”）
.attr（“类”，axisName（“网格线”，axisIndex））
.attr（“旋转”，axisIndex==0？[0,1,0，-Math.PI/2]：[0,0,0,0]）
.append（“形状”）
newGridLines.append（“外观”）
.附加（“材料”）
.attr（“发射色”、“灰色”）
newGridLines.append（“polyline2d”）；
gridLines.selectAll（“shape polyline2d”）.transition（）.duration（持续时间）
.attr（“线段”、“0 0、+axisRange[1]+“0”）
gridLines.transition（）.duration（持续时间）
.attr（“转换”，axisIndex==0
函数（d）{返回刻度（d）+“0”}
：函数（d）{返回“0”+刻度（d）；}
)
}  
}
函数绘图数据（持续时间）{
如果（！行）{
log（“没有要打印的行”）
返回；
}
变量x=标度[0]，y=标度[1]，z=标度[2]；
var sphereRadius=0.2；
var datapoints=scene.selectAll（“.datapoint”）.data（行）；
datapoints.exit（）.remove（）
ShapeCenter=数据点
.输入（）
.append（“transform”）.attr（“类”、“数据点”）
.append（“形状”）
;
形状中心
.append（“外观”）
.附加（“材料”）
.attr（“漫反射色”、“钢蓝”）；
shapeCenter.append（“框”）
.attr（“尺寸”、“0.40.40.4”）；
datapoints.transition（）持续时间（2000年）
.attr（“翻译”，函数（行）{
返回x（第行）