Fatal编程技术网
  • d3.js/
  • 结合Aframe和d3.js：使用不同的库源嵌入问题

结合Aframe和d3.js：使用不同的库源嵌入问题

d3.js aframe

结合Aframe和d3.js：使用不同的库源嵌入问题,d3.js,aframe,D3.js,Aframe,我试图重现将d3.js与可以找到的a-frame对象相结合的示例。如果我像这样复制它，它会工作，但我的目标是让它在我的网页中工作，在那里我将a-scene嵌入到一个div中。但我不能让它嵌入。它在背景中渲染全尺寸 示例中的库的来源是： <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="https://aframe.io/rele

我试图重现将d3.js与可以找到的a-frame对象相结合的示例。如果我像这样复制它，它会工作，但我的目标是让它在我的网页中工作，在那里我将a-scene嵌入到一个div中。但我不能让它嵌入。它在背景中渲染全尺寸

示例中的库的来源是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
为了嵌入它，我将脚本的源代码从示例更改为

<script src="https://d3js.org/d3.min.js"></script>
<script src="https://aframe.io/releases/0.5.0/aframe.js"></script>
现在我嵌入了它，但是d3.js代码没有呈现任何东西。我想只有背景和灯光的场景

因此，我想知道为什么官方的d3源代码不适用于a-frame，为什么嵌入选项不再适用于最新版本

同样的问题有不同的说法：谁在维护d3的cloudfare版本，最新版本的a-frame和嵌入式选项中是否存在缺陷

谢谢你的时间

编辑：

因此，如果我将aframe版本设置为0.1.0，我会让d3代码工作，但a-scene没有嵌入到我的div中。如果我将0.5.0版本设置为a-scene，我会嵌入a-scene，但d3代码不再工作

我把代码放在下面

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="utf-8">
    <title>DUMMY</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Stylesheet" />

    <script src="https://samsunginter.net/a-frame-components/dist/ocean-plane.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <!--<script src="https://d3js.org/d3.min.js"></script>-->
    <script src="https://aframe.io/releases/0.1.0/aframe.js"></script>

</head>
<body>
    <div id="hd">
        <wicket:link>
            <img src="hidden.svg">
        </wicket:link>
        <span id="bannerTitle">dummy title</span>
    </div>
    <div id="bd">
        <div id="aSceneDiv">
            <a-scene embedded>
                <!-- Camera with customized cursor -->
                <a-camera position="0 1.8 0" cursor-visible="true" cursor-scale="2" cursor-color="#4CC3D9" cursor-offset="2" cursor-maxdistance="100" cursor-opacity="0.5" cursor-fuse="true"></a-camera>
                <a-light color="#da47da" position="0 5 0" type="ambient"></a-light>
                <a-entity camera look-controls wasd-controls></a-entity>
                <a-entity light="type: point; color: #EEE; intensity: 0.5" position="0 3 0"></a-entity>
                <!-- Sky -->
                <a-sky color="#c8f8e0"></a-sky>
            </a-scene>

        </div>
        <div>
            <button type="button" onclick="render()" id="start">Start</button>
            <button type="button" onclick="stopRender()" id="stop">Stop</button>
            <button type="button" onclick="addGround()" id="ground">Add Ground</button>
        </div>

        <div>
            Call to a function of the wicketApplication: <wicket:container wicket:id="version">temporary text</wicket:container>.
        </div>
    </div>
    <div id="ft">
    </div>
    <script>

        // fake data
        var data = [ 10, 20, 30, 15, 25, 35, 40,
            45, 50, 70, 100, 120, 130,
            12, 18, 22, 29, 33, 44, 59, 200]

        // we scale the height of our bars using d3's linear scale
        var hscale = d3.scale.linear()
            .domain([0, d3.max(data)])
            .range([0, 3])

        // we select the scene object just like an svg
        var scene = d3.select("a-scene")

        // we use d3's enter/update/exit pattern to draw and bind our dom elements
        var bars = scene.selectAll("a-cube.bar").data(data)
        bars.enter().append("a-cube").classed("bar", true)
        // we set attributes on our cubes to determine how they are rendered
        bars.attr({
            position: function(d,i) {
                // cubes are positioned by their center so we
                // offset for their height
                var y = 1;
                // lets place the bars all around our camera
                var radius = 5;
                //var x = i - data.length/2;
                var x = radius * Math.cos(i/data.length * 2 * Math.PI)
                var z = radius * Math.sin(i/data.length * 2 * Math.PI)
                return x + " " + y + " " + z
            },
            rotation: function(d,i) {
                var x = 0;
                var z = 0;
                var y = -(i/data.length)*360;
                return x + " " + y + " " + z
            },
            width: function(d) { return 0.5},
            depth: function(d) { return 0.9},
            height: function(d) { return hscale(d)},
            opacity: function(d,i) { return 0.6 + (i/data.length) * 0.4},
            metalness: function(d,i) { return i/data.length}
        })
            .on("click", function(d,i) {
                console.log("click", i,d)
            })
            .on("mouseenter", function(d,i) {
                // this event gets fired continuously as long as the cursor
                // is over the element. we only want trigger our animation the first time
                if(this.hovering) return;
                console.log("hover", i,d)
                this.hovering = true;
                d3.select(this).transition().duration(1000)
                    .attr({
                        metalness: 0.5,
                        width: 2
                    })
            })
            .on("mouseleave", function(d,i) {
                console.log("leave",i,d)
                this.hovering = false;
                d3.select(this).transition()
                    .attr({
                        metalness: 0,
                        width: 0.5
                    })
            })
    </script>
</body>


笨蛋
假标题


版本0.5.0

我找到了一些评论建议的可行实施方案。多亏了@ngokevin，我明白了


<script src="https://aframe.io/releases/latest/aframe.min.js"></script>






实际上是引用0.1.0版本。因此，将其更改为0.5.0是正确的做法。这会产生版本冲突，因此我更改了a-frame设置并将其简化为


<div id=aSceneID>
    <a-scene>
        <a-plane static-body color="#99d8c9" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
</div>







最后，为了嵌入它，我们必须添加css代码
.a-canvas{height:calc（100%）；}
不推荐使用“最新”版本的a-Frame；它将改变，可以打破你的演示从你下面。我会坚持0.5.0。这个例子有用吗？对于嵌入选项不起作用的问题，我添加了css代码
.a-canvas{height:calc（100%）；}
以将其嵌入到我的div中。@DonMcCurdy，为什么要从cloudflare加载d3？而不是d3js.org？@DonMcCurdy，是的，这个链接很有用。它很好地显示了d3和AFrame之间的组合能力。当我复制粘贴代码和json时，我会显示没有图像的块。我想这里一切正常？不要使用
/latest/aframe.min.js
，它被锁定为0.1.0。也许你在升级到0.1.0到0.5.0时遇到了一个问题，这是一个巨大的飞跃。