пользовательские оси x и y веб-графика webgl в javascript

Question

Я работаю над 3D-графиком в JavaScript, созданным Грегом Росс. Все работает хорошо, за исключением того, что я не могу контролировать метки тика, пределы и топоры осевого тика. Моя конечная цель - иметь логарифмическую шкалу по осям x и y, и для этого мне нужно контролировать расстояние между метками метки и началом координат для осей x и y.

Но в моем случае я могу только выбрать метки оси:

// WeKno 
      var canvas_height = ComputedStyleValue('surfacePlotDiv', 'height'); 
      var canvas_width = ComputedStyleValue('surfacePlotDiv', 'width'); 

      var surfacePlot; 
      var data, data2, options, basicPlotOptions, glOptions, animated, plot1, plot2, values, values2; 

      var numRows = 19; 
      var numCols = 20; 

      var tooltipStrings = new Array(); 
      var tooltipStrings2 = new Array(); 

      function setUp(){ 

       values = new Array(); 


       data = { 
        nRows: numRows, 
        nCols: numCols, 
        formattedValues: values 
       }; 

       surfacePlot = new SurfacePlot(document.getElementById("surfacePlotDiv")); 

       // Don't fill polygons in IE < v9. It's too slow. 
       var fillPly = true; 

       // Define a colour gradient. 
       var colour1 = { 
        red: 0, 
        green: 0, 
        blue: 255 
       }; 
       var colour2 = { 
        red: 0, 
        green: 255, 
        blue: 255 
       }; 
       var colour3 = { 
        red: 0, 
        green: 255, 
        blue: 0 
       }; 
       var colour4 = { 
        red: 255, 
        green: 255, 
        blue: 0 
       }; 
       var colour5 = { 
        red: 255, 
        green: 0, 
        blue: 0 
       }; 
       var colours = [colour1, colour2, colour3, colour4, colour5]; 

       // Axis labels. 
       var xAxisHeader = "F"; 
       var yAxisHeader = "C"; 
       var zAxisHeader = "Cost [$]"; 

       var renderDataPoints = false; 
       var background = '#ffffff'; 
       var axisForeColour = '#000000'; 
       var hideFloorPolygons = true; 

       var chartOrigin = { 
        x: 0, 
        y: 0 
       }; 

       // Options for the basic canvas plot. 
       basicPlotOptions = { 
        fillPolygons: fillPly, 
        tooltips: tooltipStrings, 
        renderPoints: renderDataPoints 
       } 

       // Options for the webGL plot. 
       var xLabels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
       var yLabels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
       //var zLabels = [0, 1, 2, 3, 4, 5]; 

       // These labels are used when autoCalcZScale is false; 
       glOptions = { 
        xLabels: xLabels, 
        yLabels: yLabels, 
        chkControlId: "allowWebGL", 
        autoCalcZScale: true, 
        animate: true 
       }; 

       // Options common to both types of plot. 
       options = { 
        xPos: 0, 
        yPos: 0, 
        width: canvas_width, 
        height: canvas_height, 
        colourGradient: colours, 
        xTitle: xAxisHeader, 
        yTitle: yAxisHeader, 
        zTitle: zAxisHeader, 
        backColour: background, 
        axisTextColour: axisForeColour, 
        hideFlatMinPolygons: hideFloorPolygons, 
        origin: chartOrigin 
       }; 

       newplot(); 

       coordinateCharts(); 
      } 

      function coordinateCharts(){ 
       // Link the two charts for rotation. 

       plot1 = surfacePlot.getChart(); 

       if (!plot1 || !plot2) 
        return; 

       plot1.otherPlots = [plot2]; 
       plot2.otherPlots = [plot1]; 
      } 

      setUp(); 

      function toggleChart(chkbox){ 
       surfacePlot.draw(data, options, basicPlotOptions, glOptions); 
       surfacePlot2.draw(data2, options, basicPlotOptions2, glOptions2); 

       coordinateCharts(); 
      } 

      // ================== parser, evaluator ========================== WeKno 

      function Demoparse(valueArray, toolTips){ 
       var idx = 0; 
       var dataCF = generateDataCF(); 
       //var max = maxValue(dataCF); 
       for (var x = 0; x < 19; x++) { 

        valueArray[x] = new Array(); 

        for (var y = 0; y < 20; y++) { 
        var temp = dataCF[x][y]; 
         valueArray[x][y] = temp; 

         toolTips[idx] = "x:" + x + ", y:" + y + " = " + 1; 
         idx++; 

        } 

       } 

      } 

      function newplot(){ 


        Demoparse(values, tooltipStrings); 
        surfacePlot.draw(data, options, basicPlotOptions, glOptions); 

       coordinateCharts(); 

      } 

      function ComputedStyleValue(ID, property)// WeKno 
      { 
       var e = document.getElementById(ID); 
       return (window.getComputedStyle(e, null).getPropertyValue(property)); 
      } 

Кто-нибудь знает, как контролировать положение клеща меток для осей х и у, чтобы построить ось логарифмической шкалы? Plz помочь мне

Answer 1

я отправить по электронной почте Greg Россу, и он ответил:

«Боюсь, что оси не очень гибки Хотя можно было бы добиться того, что вы хотите, изменив» renderAxisText ". Вы увидите, что он в основном отображает xTitle, yTitle и zTitle в трех точках, центрированных на каждой соответствующей оси. Все, что вам нужно, это передать переменные x, y, zTitle в виде массивов вместо строк и затем создайте несколько точек вдоль каждой оси в соответствии с каждой меткой в ​​массиве ».

Это означает, что это возможно, но я до сих пор не знаю, как действовать точно. Вот код указанной функции:

this.renderAxisText = function(axes){ 
     var xLabelPoint = new Point3D(0.0, 0.5, 0.0); 
     var yLabelPoint = new Point3D(-0.5, 0.0, 0.0); 
     var zLabelPoint = new Point3D(-0.5, 0.5, zTextPosition); 

     var transformedxLabelPoint = transformation.ChangeObjectPoint(xLabelPoint); 
     var transformedyLabelPoint = transformation.ChangeObjectPoint(yLabelPoint); 
     var transformedzLabelPoint = transformation.ChangeObjectPoint(zLabelPoint); 

     var xAxis = axes[0]; 
     var yAxis = axes[1]; 
     var zAxis = axes[2]; 

     canvasContext.fillStyle = this.axisTextColour; 

     if (xAxis.distanceFromCamera > yAxis.distanceFromCamera) { 
      var xAxisLabelPosX = transformedxLabelPoint.ax; 
      var xAxisLabelPosY = transformedxLabelPoint.ay; 
      canvasContext.fillText(xTitle, xAxisLabelPosX, xAxisLabelPosY); 
     } 

     if (xAxis.distanceFromCamera < yAxis.distanceFromCamera) { 
      var yAxisLabelPosX = transformedyLabelPoint.ax; 
      var yAxisLabelPosY = transformedyLabelPoint.ay; 
      canvasContext.fillText(yTitle, yAxisLabelPosX, yAxisLabelPosY); 
     } 

     if (xAxis.distanceFromCamera < zAxis.distanceFromCamera) { 
      var zAxisLabelPosX = transformedzLabelPoint.ax; 
      var zAxisLabelPosY = transformedzLabelPoint.ay; 
      canvasContext.fillText(zTitle, zAxisLabelPosX, zAxisLabelPosY); 
     } 
    }; 

Если кто-то может быть более точным, это действительно поможет мне.

С благодарностью