Javascript html页面在本地时可用，但在云ide上不可用_Javascript_Html_D3.js_Cloud9 Ide

Javascript html页面在本地时可用，但在云ide上不可用

javascript html d3.js

Javascript html页面在本地时可用，但在云ide上不可用,javascript,html,d3.js,cloud9-ide,Javascript,Html,D3.js,Cloud9 Ide,我试图在一个简单的网页上呈现一个d3.js图形。这张图很简单。我从cloud9运行它，这通常是一个非常好的基于云的无错误IDE。但是，当我运行它时，页面是空白的。我可以让简单的javascript函数呈现得很好，但是alert和hello world等，而不是d3.js。我不知道为什么。因此，我在cloud9中运行html，然后从浏览器中“查看源代码”，并将代码逐字复制粘贴到mac笔记本电脑上的本地html页面中，然后运行，效果很好。所以基本上我不明白为什么它在cloud9上不起作用。这是原样的

我试图在一个简单的网页上呈现一个d3.js图形。这张图很简单。我从cloud9运行它，这通常是一个非常好的基于云的无错误IDE。但是，当我运行它时，页面是空白的。我可以让简单的javascript函数呈现得很好，但是alert和hello world等，而不是d3.js。我不知道为什么。因此，我在cloud9中运行html，然后从浏览器中“查看源代码”，并将代码逐字复制粘贴到mac笔记本电脑上的本地html页面中，然后运行，效果很好。所以基本上我不明白为什么它在cloud9上不起作用。这是原样的代码

<!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>

您有以下两个选项：

</head>
<body>

所以HTML是无效的。

我刚刚在cloud 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

请尝试使用http链接，或从支持https（如cloudflare）的cdn加载d3：

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

http状态是什么？200? 您在哪里包括d3.js库？在我列出的代码中，该库是CDN。它就在标签后面，因为我已经改变了这些打字错误。虽然这可能是turbolinks和d3.js的问题，但没有什么区别。还有其他人有这个问题吗？@SebastianZeki，它实际上可能是一个浏览器问题。我将您的代码粘贴到Cloud9中，当我在Opera中访问URL时，它提供的页面确实显示了该图，但当我从用于Cloud9的Firefox中浏览它时，却没有显示。你试过各种浏览器吗？是的，就是这样。改为http，它工作了。谢谢我花了太长时间才弄明白。。。