结合Aframe和d3.js：将问题嵌入不同的库源 [英] combining Aframe and d3.js: embed issue with different library source
问题描述
我正在尝试重现将d3.js与a框架对象结合在一起的示例，您可以在
版本0.5.0
我能够找到由一些评论。感谢@ngokevin，我了解
< script src = https://aframe.io/releases/latest/ aframe.min.js< / script>
实际上是指0.1.0版本。因此，将其更改为0.5.0是正确的举动。这样就会产生版本冲突，因此我更改了A帧设置并将其简化为
÷ = aSceneID>
< a-scene>
< a平面静态颜色=＃99d8c9 height = 100 width = 100 rotation =-90 0 0< / a-plane>
< / a-scene>
< / div>
最后，要使其嵌入，我们必须添加CSS代码。画布{高度：calc（100％）;}
I am trying to reproduce the example that combines d3.js with a-frame objects one can find here. If I reproduce it like so, it works, but my aim is to have it working in my webpage, where I embed the a-scene in a div. But I cannot have it embedded. It renders in the back ground full size.
the sources of the libraries in the example are:
<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>
In order to have it embedded I change the sources of the scripts from the example to
<script src="https://d3js.org/d3.min.js"></script>
<script src="https://aframe.io/releases/0.5.0/aframe.js"></script>
Now I have it embedded, but the d3.js code does not render anything. Only the scene backgorund and lightening I guess.
Therefore, I am wondering why the official d3 source is not working with a-frame, and why the embed option is not working anymore with the latest release?
same question put differently: who is mainting the cloudfare version of d3 and is there a bug in the latest version of A-frame and the embedded option?
Thanks for your time
EDIT:
So if I have the aframe version set to 0.1.0, I have the d3 code working but the a-scene is not embedded in my div. And if I put the 0.5.0 version I have the a-scene embedded but the d3 code is not working anymore
I put below the code.
<!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>
Version 0.1.0
Version 0.5.0
I was able to find a working implementation that was suggested by some comments. Thanks to @ngokevin, I understood that
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
is actually referencing to the 0.1.0 version. Hence changing it to 0.5.0 is the right move. This was then producing version conflicts, and therefore I changed the a-frame set up and simplified it to this
<div id=aSceneID>
<a-scene>
<a-plane static-body color="#99d8c9" height="100" width="100" rotation="-90 0 0"></a-plane>
</a-scene>
</div>
and finally, to have it embedded we have to add the css code .a-canvas { height: calc(100%);}
这篇关于结合Aframe和d3.js：将问题嵌入不同的库源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
