javascript x3dom ajax üzerinden ekleme

Question

ajax geri arama yoluyla bir x3d nesnesi eklemeye çalışıyorum ancak nesne görünmüyor. Sayfanın kaynak kodunu kopyaladıktan sonra yeni bir sayfaya yerleştirdikten sonra x3d nesnesini gösterdi. Burada bir şey mi eksik? Bunun için bir iş var mı? Teşekkürler.

html:

<div id="divPlot" style="border: 1px solid black"></div> 
<button onclick="add_x3d()">Click</button> 
    <script> 
     d3.select('html').style('height','100%').style('width','100%'); 
     d3.select('body').style('height','100%').style('width','100%'); 
     d3.select('#divPlot').style('width', "450px").style('height', "450px"); 

     function add_x3d() { 
      scatterPlot3d(d3.select('#divPlot')); 
     } 
    </script> 

javascript:

function scatterPlot3d(parent){ 

    var rows = [ 
     {"SITE":"1","SIGNAME":"A","X":10,"Y":10,"Z":111}, 
     {"SITE":"1","SIGNAME":"B","X":200,"Y":10,"Z":222}, 
     {"SITE":"2","SIGNAME":"A","X":10,"Y":40,"Z":333}, 
     {"SITE":"2","SIGNAME":"B","X":200,"Y":40,"Z":444}, 
     {"SITE":"3","SIGNAME":"A","X":10,"Y":70,"Z":555}, 
     {"SITE":"3","SIGNAME":"B","X":200,"Y":70,"Z":666}, 
     {"SITE":"4","SIGNAME":"A","X":10,"Y":100,"Z":777}, 
     {"SITE":"4","SIGNAME":"B","X":200,"Y":100,"Z":888} 
    ]; 

    var x3d = parent 
      .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("centerOfRotation", [5, 5, 5]) 
      .attr("fieldOfView", [-5, -5, 15, 15]) 
      .attr("orientation", [-0.5, 1, 0.2, 1.12 * Math.PI/4]) 
      .attr("position", [8, 4, 15]); 

    // Used to make 2d elements visible 
    function makeSolid(selection, color) { 
     selection.append("appearance") 
       .append("material") 
       .attr("diffuseColor", color || "black"); 
     return selection; 
    } 

    function constVecWithAxisValue(otherValue, axisValue, axisIndex) { 
     var result = [otherValue, otherValue, otherValue]; 
     result[axisIndex] = axisValue; 
     return result; 
    } 

    var XAxisMin = d3.min(rows, function(d){return d.X;}); 
    var XAxisMax = d3.max(rows, function(d){return d.X;}); 
    var XAxisDel = XAxisMax-XAxisMin; 

    var YAxisMin = d3.min(rows, function(d){return d.Y;}); 
    var YAxisMax = d3.max(rows, function(d){return d.Y;}); 
    var YAxisDel = YAxisMax-YAxisMin; 

    var ZAxisMin = d3.min(rows, function(d){return d.Z;}); 
    var ZAxisMax = d3.max(rows, function(d){return d.Z;}); 
    var ZAxisDel = ZAxisMax-ZAxisMin; 

    function AxisMin(axisIndex) { 
     return [XAxisMin, ZAxisMin, YAxisMin][axisIndex]; 
    } 

    function AxisMax(axisIndex) { 
     return [XAxisMax, ZAxisMax, YAxisMax][axisIndex]; 
    } 

    function AxisDel(axisIndex) { 
     return [XAxisDel, ZAxisDel, YAxisDel][axisIndex]; 
    } 

    function axisName(name, axisIndex) { 
     return AxisKeys[axisIndex] + name; 
    } 

    function get2DVal(){ 
     if (XAxisDel >= YAxisDel){ 
      return XAxisDel; 
     } else { 
      return YAxisDel; 
     } 
    } 

    function ConvAxisRange(inputVal, axisIndex) { 
     var val; 
     if (axisIndex === 0 || axisIndex === 2) { 
      val = d3.scale.linear() 
       .domain([0, delta2D]) 
       .range(AxisRange); 
     } else { 
      val = d3.scale.linear() 
       .domain([0, ZAxisDel]) 
       .range(AxisRange); 
     } 
     return val(inputVal); 
    } 

    function ConvAxisRange2D(inputVal) { 
     var val = d3.scale.linear() 
       .domain([0, delta2D]) 
       .range(AxisRange); 
     return val(inputVal); 
    } 

    var AxisKeys = ["X", "HEIGHT", "Y"]; 
    var AxisRange = [0, 10]; 
    var scales = []; 
    var AxisLen; 
    var duration = 300; 
    var delta2D = get2DVal(); 
    var ArrayOfColors = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"]; 

    var colorScale = d3.scale.linear() 
     .domain([0, ZAxisDel*0.25, ZAxisDel*0.50, ZAxisDel*0.75, ZAxisDel]) 
     .range(ArrayOfColors); 

    function initializeAxis(axisIndex) { 

     var key = AxisKeys[axisIndex]; 
     drawAxis(axisIndex, key, duration); 

     var scaleDel = AxisDel(axisIndex); 

     var rotation = [[0, 0, 0, 0], [0, 0, 1, Math.PI/2], [0, 1, 0, -Math.PI/2]]; 

     var newAxisLine = scene.append("transform") 
       .attr("class", axisName("Axis", axisIndex)) 
       .attr("rotation", (rotation[axisIndex])) 
       .append("shape"); 
     newAxisLine 
       .append("appearance") 
       .append("material") 
       .attr("emissiveColor", "lightgray"); 
     newAxisLine 
       .append("polyline2d") 
       // Line drawn along y axis does not render in Firefox, so draw one 
       // along the x axis instead and rotate it (above). 
       .attr("lineSegments", "[" + ConvAxisRange(scaleDel, axisIndex) + " 0, 0 0]"); 

     // axis labels 
     var newAxisLabel = scene.append("transform") 
       .attr("class", axisName("AxisLabel", axisIndex)) 
       .attr("translation", constVecWithAxisValue(0, ConvAxisRange(scaleDel*1.15, axisIndex), 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"); 
    } 

    // Assign key to axis, creating or updating its ticks, grid lines, and labels. 
    function drawAxis(axisIndex, key, duration) { 

     var scale; 

     if (axisIndex === 0 || axisIndex === 2) { 
      scale = d3.scale.linear() 
       .domain([AxisMin(axisIndex), AxisMax(axisIndex)]) // demo data range 
       .range([0, ConvAxisRange2D(AxisDel(axisIndex))]); 
     } else { 
      scale = d3.scale.linear() 
       .domain([AxisMin(axisIndex), AxisMax(axisIndex)]) // demo data range 
       .range(AxisRange); 
     } 

     scales[axisIndex] = scale; 

     var numTicks = 5; 
     var tickSize = 0.1; 
     var tickFontSize = 0.5; 

     // ticks along each axis 
     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); 
     // enter + update 
     ticks.transition().duration(duration) 
       .attr("translation", function(tick) { 
      return constVecWithAxisValue(0, scale(tick), axisIndex); 
     }); 
     ticks.exit().remove(); 

     // tick labels 
     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(); 
    } 

    function plotData() { 

     if (!rows) { 
      console.log("no rows to plot."); 
      return; 
     } 

     var x = scales[0], z = scales[1], y = scales[2]; 
     var sphereRadius = 0.2; 

     // Draw a sphere at each x,y,z coordinate. 
     var datapoints = scene.selectAll(".datapoint").data(rows); 
     datapoints.exit().remove(); 

     var newDatapoints = datapoints.enter() 
       .append("transform") 
       .attr("class", "datapoint") 
       .attr("scale", [sphereRadius, sphereRadius, sphereRadius]) 
       .append("shape"); 
     newDatapoints 
       .append("appearance") 
       .append("material"); 
     newDatapoints 
       .append("sphere"); 
     // Does not work on Chrome; use transform instead 
     //.attr("radius", sphereRadius) 

     datapoints.selectAll("shape appearance material") 
       .attr("diffuseColor", function(row){ 
        return colorScale(row.Z-ZAxisMin); 
       }); 

     datapoints.attr("translation", function(row) { 
      return x(row.X) + " " + z(row.Z) + " " + y(row.Y); 
     }); 
    } 


    function initializePlot() { 
     initializeAxis(0); 
     initializeAxis(1); 
     initializeAxis(2); 
    } 

    initializePlot(); 
} 

Answer 1

Sen bütün x3d elemanı ve bir sahne ekleyemezsiniz dinamik başına x3dom bir window.onload olayla başlatılır beri. Bu, HTML belgenizin bir parçası olmalıdır. Ardından, öğeleri (görünümler, şekiller vb.) Sahneye ekleyebilirsiniz.

Ama ne yazık ki bu iyi belgelenmiş değildir, posta listesinde bir reload fonksiyonu ( https://github.com/x3dom/x3dom/blob/1.7.1/src/Main.js#L327) hakkında süre önce bir şey duydum: İstediğin yapıyor olmalı

/** Initializes an <x3d> root element that was added after document load. */ 
x3dom.reload = function() { 
    onload(); 
}; 

.