персонализирайте оста x и y на webgl surface-plot в javascript

Работя върху 3D Surface Plot в 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));
            } 

Някой знае ли как да контролира позицията на етикетите за отметки за оси x и y, за да изгради ос на логаритмичен мащаб? Моля, помогнете ми


person Idrees Samim    schedule 11.08.2015    source източник


Отговори (1)


Изпратих имейл до Грег Рос и той ми отговори:

„Страхувам се, че осите не са много гъвкави. Въпреки че би било възможно да постигнете това, което искате, като модифицирате функцията „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);
        }
    };

Ако някой може да бъде малко по-точен, наистина ще ми помогне.

Благодаря

person Idrees Samim    schedule 12.08.2015