結合了Aframe和d3.js：嵌入問題與不同的圖書館來源

我想重現結合d3.js與框架對象的例子，你可以找到here。如果我像這樣重現它，它就會起作用，但我的目標是讓它在我的網頁中工作，在此處將a場景嵌入到div中。但我不能嵌入它。它在後面呈現全尺寸。結合了Aframe和d3.js：嵌入問題與不同的圖書館來源

中的例子庫的來源是：

<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代碼不會呈現任何內容。只有現場backgorund和減輕我猜。

因此，我想知道爲什麼官方d3源代碼不能使用a-frame，以及爲什麼embed選項不再適用於最新版本？

同樣的問題換句話說：誰在維護d3的雲環境版本，並且A框架和嵌入式選項的最新版本中是否存在錯誤？

感謝您的時間

編輯：

所以，如果我有AFRAME版本設置爲0.1.0，我有D3代碼工作，但一個場景是不是嵌在我的div 。如果我把0.5.0版本，我有一個場景嵌入，但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

0.5.0版

來源

2017-05-16 Yvus

的「最新「不推薦使用A-Frame版本;它會改變，並可以打破你的演示。我會堅持0.5.0。這個例子有用嗎？ http://bl.ocks.org/donmccurdy/2d13aa01d854ef60eac24102846a8a5f –

對於嵌入式選項不起作用的問題，我添加了CSS代碼'.a-canvas {height：calc（100％）;}'讓它成爲嵌入我的分區。 – Yvus

@DonMcCurdy，你爲什麼要從_cloudflare_加載d3？而不是_d3js.org_？ – Yvus

我能找到，是由一些意見建議工作的實施。感謝@ngokevin，我明白

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

實際上是引用到0.1.0版本。因此將其改爲0.5.0是正確的舉措。這是再製造的版本衝突，因此我改變了一個框架建立並簡化這一

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

來源

2017-05-19 07:50:45 Yvus

結合了Aframe和d3.js：嵌入問題與不同的圖書館來源

回答

相關問題