Based on this example: http://bl.ocks.org/jfreels/6734245
When i use a code that contains this single line in D3.js, :
<script>
var select = d3.select('body').append('select')
</script>
Then an empty drop down menu on the upper left side of the screen appears.
So my plan was to copy and paste the drop down menu in a force-direct layout based on this example: https://bl.ocks.org/mbostock/4062045
But unfortunaly it did not worked. Is it because i use d3.select('body') to create the drop down menu?
Yes.
It works perfectly fine when you add the <body> tag.
Your code would look something like (excluding scripts, and style):
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<svg width="960" height="600"></svg>
<script type='text/javascript' src='script.js'></script>
</body>
Make sure have the script.js file in the right directory. Else copy the code into a <script> </script>tag. I cannot recommend this though.
Related
I was working with the following tutorial of D3.js: https://www.tutorialspoint.com/d3js/index.htm.
My issue is as follows:
I'm aware of that the location inside the HTML is at the end of the . I mean, I usually put it here:
<body>
<!-- HTML code -->
<script>
<!-- JS code or external JS link -->
</script>
</body>
With this practice, what I'm looking is to run JS after the HTML content renders.
But! When I follow this practice using D3.js, what I discover is that D3.js renders what I add (using d3("html").append(something to append), after the script tags.
For example!
<!DOCTYPE html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>
</body>
</html>
I'm getting the content as follows:
<!DOCTYPE html>
<html>
<head>
<title>D3.js Test</title>
</head>
<body>
<div class="div_test">
<h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.select("html").append("p").text("I get this text after the script tags");
</script>`
</body><p>I get this text after the script tags</p></html>
Questions!
Is the position of the tag correct?
Is there a possibility to keep the flow without adding a to anchor the expected new tag?
Thanks!!!
You can use selection.insert() to insert an element instead of appending it to the DOM. The second argument to that method determines where the newly created element is put into the DOM tree. If you just want to put it in front of the first <script> element you can do something like:
d3.select("body").insert("p", "script") // <-- insert before first <script>
If you need to place it after the <div>, no matter what the next element might look like, you can use the adjacent sibling combinator to select the sibling element directly following the <div> like so:
d3.select("body").insert("p", "div + *") // <-- insert before next element following div
I'm writing some codes in P5JS. And I want to add multiple JS files to my HTML page. But when I do that, only the last one is displayed on the page. How can I show all of them?! And how can I style each one? For example I want to show one of them on top of the page, then have some HTML files or texts or whatever, then another JS file below them. How can style them using CSS? I have already linked the CSS file to the HTML page.
The site didn't allow me to paste the code the way I wanted so I uploaded the picture here
Thanks..
You can put all of the js files either in the head section:
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
or you can put it at the bottom of the file:
<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>
If you're going to add multiple p5js sketches to one HTML document you could create p5 instances to keep all variables out of the global scope of your page.
Example if the following was saved as 'sketch.js':
var sketch = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
and then you would import the sketch and use it in a div in your HTML.
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
<div id="sketch"></div>
</body>
</html>
You would then repeat for other sketches. You can even have multiple p5js sketches in one js file.
With the code for your sketches and html this would probably be fairly quick to resolve.
So i am trying to build a code editor which shows output of html in iframe. but there is some trouble. i used codemirror before now i am using ACE but something goes wrong here as it keeps showing me "xxxxxx" and numbers. what is the correct way to use it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<style>
#jsEditor{height:300px;}
</style>
</head>
<body>
<div id="jsEditor"></div>
<iframe id="frame"></iframe>
<button onclick="refresh()">Click</button>
<script type="text/javascript">
var e=ace.edit("jsEditor");
e.getSession().setMode("ace/mode/html");
e.setTheme("ace/theme/xcode");
e.getSession().setTabSize(2);
e.renderer.setShowGutter(false);
function refresh(){
var textval=document.getElementById('jsEditor').textContent;
document.getElementById('frame').srcdoc=textval;
}
</script>
</body>
</html>
[This is the output i get ][2]
https://jsfiddle.net/fc0cjo9z/
Ace renders to dom only the visible portion of the text, and adds some nodes that do not correspond to any text.
So instead of document.getElementById('jsEditor').textContent you need to call the getValue() method of the editor. in your example change the line with textContent to
var textval=e.getValue();
I have been designing a gantt chart. The javascript files are located within the html body:
<body>
<section>
<div class="container">
<h1 class="arrow">Areas of Expertise</h1>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
<script type="text/javascript" src="js/gantt.js"></script>
</div>
</section>
</body>
However, when I look at the source, the svg file is located outside of the section tags:
<body>
<section>...</section>
<script>...</script>
<svg class="chart" width="777" height="827">...</svg>
</body>
I want my chart to take on the properties of the container it's in. It doesn't seem to be doing that. Here is a working example of my chart in action: http://jsbin.com/pigudeyovi/2/edit?html,output
Why is the .svg outside of the section tags?
The location of the code is not significant in deciding where its output appears -- D3 requires you to specify explicitly where to add any new elements to the DOM.
In this case, the output will always appear immediately below the body element. This is hard-coded in the Gantt chart library source code and not configurable by the user. To change that you either need to change the source code of the library or move the DOM element yourself.
The gnatt-chart plugin is appending the SVG to the body.
https://github.com/dk8996/Gantt-Chart/blob/master/gantt-chart-d3.js#L75
So actually i am not much familiar with javascript that's why i am going to post it to know something that i am going to know,
So here it is,
Suppose i have html page and hosted on some where on internet and its coding is,
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
</body>
</html>
In this code Link anchor text use for hyperlink, I would like to use javascript that call from another site, where the link exist and it display over there like this.
<script type="text/javascript" src="http://mysite.com/java.js">
I want to know that what code i put on java.js so it show the hyperlink in my html file and how and where do i add code to html page and in javascript
Advance Thanks for help :)
Apologies in advance if I misunderstood your question, but it sounds like you'd like to use JavaScript from another location on your site.
Using the example above, here's what that would look like:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
<script type="text/javascript" src="http://mysite.com/java.js"></script>
</body>
</html>
You could also link to it in the <head> instead, but it's better for performance if the scripts are placed in the footer.
your anchor:
href="javascript:linksomething()"
and js:
function linksomething(){
window.location.href=url;
}
is this what you want?