Question

我正在尝试重现将d3.js与可以找到{-3}}的框架对象相结合的示例。如果我像这样重现它，它可以工作，但我的目标是让它在我的网页中工作，我将一个场景嵌入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的云版本，最新版本的A-frame和嵌入式选项是否存在错误？

感谢您的时间

修改

因此，如果我将aframe版本设置为0.1.0，我可以使用d3代码，但是我的div中没有嵌入a-scene。如果我把0.5.0版本我嵌入了a场景但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.1.0 here

版本0.5.0

Answer 1

我能够找到一些评论建议的工作实现。感谢@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%);}

结合Aframe和d3.js：嵌入不同库源

1 个答案: