html page works when local but not when on cloud ide
Question
I am trying to render a d3.js graph on a simple webpage. The graph is as simple as it gets. I run it from cloud9 which is usually a really good error free cloud based IDE. However when I run it the page is blank. I can get simple javascript functions to be rendered fine however (alert and "hello world" etc.) but not the d3.js. I am not sure why. So I ran the html in cloud9 and then did 'view source' from the browser and copy-pasted the code verbatim into a local html page on my mac laptop and ran it, it worked fine. SO basically I dont understand why it doesnt work on cloud9. Here is the code as is..
<!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>
2 answers
solution1
3 ACCPTED 2015-06-06 20:35:20
I just tried it in cloud 9. When I ran the html file it gave me an https link. Chrome correctly complains about loading a non secure resource on a secure page:
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
Try your link with http or load d3 from a cdn that supports https like cloudflare:
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
solution2
1 2015-06-06 12:07:13
You have the following twice:
</head>
<body>
So the HTML isn't valid.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.