Render data inserted into a web page is not indented properly and does not appear in the desired position
I think the diagram I added should appear after the heading Implementing SVG Working , but it is visible at the end. I have assigned the section to the div where it should be inserted. I want my code to show this graph where I used it after Implementing SVG Work and before Working with functions .
------------
I am pasting the code that I wrote.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="d3/d3.layout.js"></script>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
text {
font-size: 11px;
}
</style>
</head>
<body>
<div class="container" >
<div class="row" >
<div class="col-md-4 img-responsive"><img src="img/e2.png" alt="Smiley face" height="100" width="100"></div>
<div class="col-md-4" >
<h1 ></h1>
</div>
<div class="col-md-4" >
<h1 >Plan Your Courses</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Implementation of SVG Work</h2>
<script type="text/javascript">
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];
//Width and height
var w = 500;
var h = 100;
var barPadding = 1; // <-- New!
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// GENERATING RECTANGLES AND MAKING BAR CHART
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h- (d*5);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d*5;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
// APPENDIND TEXT INTO THE BAR CHART
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return i * (w / dataset.length) + 3;
})
.attr("y", function(d) {
return h - (d * 4) + 10;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
</script>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Feature Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/555x300">
<h3>Appify</h3>
<p><a href="http://github.com">Link to project</a></p>
</div>
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/555x300">
<h3>Appify</h3>
<p><a href="http://github.com">Link to project</a></p>
</div>
</div>
</div>
</body>
</html>
It doesn't matter where you put your script code, but where the svg node is added. If you execute d3.select("body").append("svg")
, the svg node will be added to the body node as the last child of the node, and hence the graphics will appear at the very end.
Ability to place the svg node in the desired location by inserting the highlighted container div like this:
<body>
<div><!-- before svg --></div>
<div id="svg-container"><!-- you want your svg here --></div>
<div><!-- after svg --></div>
</body>
Then you can inject svg node with d3.select("div#svg-container").append("svg")
.
Since you already have a corresponding div element with a subheading in it, you can simply make it identifiable with an id attribute. It seems that your current classes ("col-md-12") are actually IDs.
source to share