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

这应该是你想要的。

javascript x3dom 通过 ajax 插入

javascript x3dom insert via ajax

javascript

ajax

x3d

x3dom