javascript x3dom通過ajax插入

Question

我想通過ajax回調插入一個x3d對象，但該對象不會出現。我複製了頁面的源代碼，然後將它放在一個新頁面上，然後顯示x3d對象。我在這裏錯過了什麼嗎？有沒有解決這個問題的方法？謝謝。

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

您不能增加整個x3d元素和場景動態本身，因爲x3dom與一個window.onload事件初始化。這應該是您的HTML文件的一部分事先。然後，您可以將元素（視圖，形狀等）添加到場景中。

但聽說前一段時間一些有關郵件列表的reload功能（https://github.com/x3dom/x3dom/blob/1.7.1/src/Main.js#L327），不幸的是，這是沒有很好的記載：

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

這應該做你想要什麼。