I'm sorry if this is incredibly easy/basic, but I'm completely new to D3.js and I just want to get this example loaded so I can try to modify it with my own data.
I'm trying to replicate the following chart from the d3fc library: https://bl.ocks.org/ColinEberhardt/3ce92a3eef9f97ab4700868896414679
I created three different files as per the example:
|- index.html
|- chart.js
|- data.csv
But then when I try to load index.html, nothing appears in the browser. Am I doing something wrong (or not doing / missing something)?
I haven't installed anything, just copied the code into the files.
Thank you!
Edit:
When I try loading an example that I download directly from the author's github, it looked like this locally:
https://imgur.com/a/7ok89md
When it should look like this:
https://colineberhardt.github.io/yahoo-finance-d3fc/
Just copy the whole code block and into your index.html file and the script in to the js file and include using the script src path. then declare the chart handler i.e <div id="chartIdHandle"> </div> in your html file and pass to the d3.select function i.e d3.select("#chartIdHandle")
You can load the data.csv file within the same function
i.e d3.csv("file url") in your if the file is in the local
directory you can just use d3.csv("/data.csv")
Give it a try.
First I changed all script url to https
<script src="https://unpkg.com/babel-polyfill#6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill#0.3.0/custom-event-polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<script src="https://unpkg.com/d3#5.5.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/d3fc#14.0.3/build/d3fc.js"></script>
Then the chart js file
<script src='chart.js' type='text/babel'></script>
Give it a try and let me know
Related
I am wondering, is it possible to provide an alternative path for a file if it cannot be found from the original one?
For example I provide an src which points to an external source, this should be the default src, but if it cannot be reached for some reason, then it should load the file from the source folder.
Example:
Original:
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
And if this cannot be loaded, then:
<script src="js/swagger-ui-bundle.js"></script>
So I could load the newest from the js file, or the default I have.
Thanks!
Try just putting them in order in your script like so:
<script src="js/swagger-ui-bundle.js"></script>
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
so that it loads one and then tries to load the other. This should work unless you have conflicting scripts.
I've tried all the posibilities as described in previous similar cases and still no results.
I'm adding the link tags at the end of the of the HTML and I am calling the folder where the file is placed but still nothing.
</div>
<script type="text/javascript" src="../pages/counter.js"></script>
Folder structure:
It's not clear for me where is the js file. But you should try the same folder:
"./pages/counter.js"
Seems like your index file is in same directory as of pages. So try
Looks like pages has the same hierarchy level as index.html, so the path getting used is incorrect.
Try using the following path:
</div>
<script type="text/javascript" src="./pages/counter.js"></script>
Let me know in case of issues
Hi I am trying to run some three.js examples locally on my machine. I know there are some problems with security so I need to set up a local server. So I'm running a local server with python. The background image and text displays but no animation is happening.
I checked console and getting the error THREE is not defined. I've downloaded three.js and put that folder in my project directory - any ideas on what's happening here?
The animation works in the browser when accessing from the three.js (examples) page. My script src is the same as the output of the command pwd when I am working on the command line in the three.js-master directory, as seen below:
<script src="/home/iiiiiii/Desktop/test/build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/loaders/PDBLoader.js"></script>
Hi most common reason for this is that either you are not adding three js into your project as I can see in your given code snippet
/home/iiiiiii/Desktop/test/build/three.js
but given path is not a valid path to give inside a project I will suggest moving this file to the project folder like other js files you added in the given snippet.
Or Simply you can add a CDN for Three js in your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>
Just put your <script src="three.js"></script> EXACT below the <body> tag that will help.
Does this library need to be called at the top of your document or after the page has been rendered?
I notice you dont have a type set when linking your libraries. try:
<script type="text/javascript" src="/home/iiiiiii/Desktop/test/build/three.js"></script>
I have js file and if I put <script src="link_to_file"></script> on bottom of my html page, it doesn't work.
Instead, if I put <script>function( etc..</script> on bottom of my html page, it works.
What is problem?
Try this:
HTML
bottom
<script src="external-script.js><script>
EXTERNAL JS
Add $(document).ready(function () {})
Make sure jQuery is loaded first.
Check your global variables.
Make sure that you're using the right path, that's depending om your folder structure. For example, if the js file is in the same folder as your html file, use
<script src = 'fileName.js'></script>
Do not forget to include the .js extension at the end of the file name. The file name should be same as the name of your js file.
Anyhow, you do not have to put the script in the head section as someone has suggested. It's in fact, not a good practice.
I am learning HTML5, and i use Three.js 3D engine. following this example, the tutorial assume i included three.js file into my HTML file. However, i found two files with that name, so i included both but nothing appear to work.
In my html file:
<script src="three.js/build/three.js"></script>
<script src="three.js/src/Three.js"></script>
Three.js package is in the same directory as my html file and it's in a folder called three.js.
Am i including the wrong file(s)?
EDIT
When i debug in Mozilla FireFox, i got this message:
[13:41:04.275] ReferenceError: $ is not defined #
The line causing the error is this:
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
Thanx for help.
If the js file is in the same directory you should just do
<script src="three.js"></script>
The path to the file inside the src attribute is relative to the current file.
Since r50 it should be:
<script src="three.js/build/three.min.js"></script>