在 javascript 中自定义 webgl 曲面图的 x 和 y 轴

Question

我正在使用 Greg Ross 创建的 JavaScript 中的 3D 曲面图。除了我无法控制轴刻度标签、限制和轴刻度位置之外，一切都运行良好。我的最终目标是在 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));
            } 

有谁知道如何控制 x 和 y 轴刻度标签的位置以构建对数刻度轴？ 请帮帮我

Answer 1

我给 Greg Ross 发了一封电子邮件，他回复了：

"恐怕轴不是很灵活。虽然通过修改"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);
        }
    };

如果有人可以更精确一点，那真的会对我有所帮助。

谢谢