html頁面在本地但不在雲端時工作ide

我想在簡單的網頁上呈現d3.js圖形。該圖很簡單。我從cloud9運行它，這通常是一個非常好的無錯雲基IDE。但是，當我運行它的頁面是空白的。我可以得到簡單的JavaScript函數，但是（警告和「hello world」等），但不是d3.js。我不知道爲什麼。所以我運行了cloud9中的html，然後從瀏覽器中'查看源代碼'並將代碼逐字複製粘貼到我的mac筆記本電腦上的本地html頁面中，然後運行它，它運行良好。所以基本上我不明白爲什麼它不適用於cloud9。這裏是代碼是..html頁面在本地但不在雲端時工作ide

<!DOCTYPE html> 
<html> 
<head> 
    <title>TBB</title> 
    <link data-turbolinks-track="true" href="/assets/style.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" /> 
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/example.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/user.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> 
    <meta content="authenticity_token" name="csrf-param" /> 
<meta content="5jRBVsv8vrjFDZO2I0dCoMt95++mzwENzkS+eP9ijAU=" name="csrf-token" /> 
    <style> 

.node { 
    fill: #ccc; 
    stroke: #fff; 
    stroke-width: 2px; 
} 

.link { 
    stroke: #777; 
    stroke-width: 2px; 
} 

    </style> 
</head> 
<body> 

    <script src='http://d3js.org/d3.v3.min.js'></script> 
    <script> 

var width = 640, 
    height = 480; 

var nodes = [ 
    { x: width/3, y: height/2 }, 
    { x: 2*width/3, y: height/2 } 
]; 

var links = [ 
    { source: 0, target: 1 } 
]; 

var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height); 


var force = d3.layout.force() 
    .size([width, height]) 
    .nodes(nodes) 
    .links(links); 

force.linkDistance(width/2); 

var link = svg.selectAll('.link') 
    .data(links) 
    .enter().append('line') 
    .attr('class', 'link'); 


var node = svg.selectAll('.node') 
    .data(nodes) 
    .enter().append('circle') 
    .attr('class', 'node'); 

force.on('end', function() { 
    node.attr('r', width/25) 
     .attr('cx', function(d) { return d.x; }) 
     .attr('cy', function(d) { return d.y; }); 

    link.attr('x1', function(d) { return d.source.x; }) 
     .attr('y1', function(d) { return d.source.y; }) 
     .attr('x2', function(d) { return d.target.x; }) 
     .attr('y2', function(d) { return d.target.y; }); 
}); 

force.start(); 
    </script> 

</body> 
</html>

來源

2015-06-06 Sebastian Zeki

什麼是HTTP狀態？ 200？你在哪裏包含d3.js庫？ – talsibony

該庫在我列出的代碼中是CDN。它就在標籤之後，因爲 –

我剛剛在雲9中試過它。當我運行html文件時，它給了我一個https鏈接。 Chrome的正確抱怨安全網頁上加載一個非安全資源：

Mixed Content: The page at 'https://demo-project-larsenmtl.c9.io/html/index.html' was loaded over HTTPS, but requested an insecure script 'http://d3js.org/d3.v3.min.js'. This request has been blocked; the content must be served over HTTPS. 
index.html:38 Uncaught ReferenceError: d3 is not defined

嘗試與支持https像CloudFlare的CDN的http或負載D3您的鏈接：

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

來源

2015-06-06 20:35:20 Mark

是的，就是這樣。更改爲http，它工作。謝謝。我花了太多時間才弄清楚...... –

您有以下兩次：

</head> 
<body>

因此，HTML是無效的。

來源

2015-06-06 12:07:13

我改變了這些拼寫錯誤。雖然 –

沒有區別，可能這是一個turbolinks和d3.js問題。有沒有其他人有這個問題？ –

@SebastianZeki，它實際上可能是一個瀏覽器的東西。我把你的代碼粘貼到Cloud9中，當我訪問Opera中的URL時，它提供的頁面顯示圖形，但是當我從Cloud9使用的Firefox中瀏覽它時沒有顯示圖形。你有沒有嘗試過各種瀏覽器？ –

html頁面在本地但不在雲端時工作ide

回答

相關問題