javascriptx3dom

Javascript x3dom Multiple polyline2d with variying length


I am trying to re-create the example here with varying axes length(polyline2d) but the problem is it copies the length of the 1st axis declared. Please help.

        <div id="divPlot" style="border: 1px solid black">
        <x3d style="width: 700px; height: 700px; border: medium none;" width="700px" height="700px">
            <scene render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" pickmode="idBuf" dopickpass="true">
                <orthoviewpoint centerofrotation="5,5,5" fieldofview="-5,-5,15,15" orientation="-0.5,1,0.2,0.8796459430051422" position="8,4,15" znear="0.1" zfar="10000"></orthoviewpoint>
                <transform class="XAxis" rotation="0,0,0,0" render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" center="0,0,0" translation="0,0,0" scale="1,1,1" scaleorientation="0,0,0,0">
                    <shape render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true">
                        <appearance sorttype="auto" alphaclipthreshold="0.1">
                            <material emissivecolor="lightgray" ambientintensity="0.2" diffusecolor="0.8,0.8,0.8" shininess="0.2" specularcolor="0,0,0"></material>
                        </appearance>
                        <polyline2d class="X_PL2D" linesegments="0 0,2 0" solid="true" ccw="true" usegeocache="true" lit="true"></polyline2d>
                    </shape>
                </transform>
                <transform class="YAxis" rotation="0,1,0,-1.5707963267948966" render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" center="0,0,0" translation="0,0,0" scale="1,1,1" scaleorientation="0,0,0,0">
                    <shape render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true">
                        <appearance sorttype="auto" alphaclipthreshold="0.1">
                            <material emissivecolor="lightgray" ambientintensity="0.2" diffusecolor="0.8,0.8,0.8" shininess="0.2" specularcolor="0,0,0"></material>
                        </appearance>
                        <polyline2d class="Y_PL2D" linesegments="0 0,9 0" solid="true" ccw="true" usegeocache="true" lit="true"></polyline2d>
                    </shape>
                </transform>
            </scene>
        </x3d>
    </div>

Solution

  • replace below line

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

    with

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

    making all polyline2D end on 0,0