this code using visualize bar chart trying dataset using. not showing anything.
<!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"> .chart { display: block; margin: auto; margin-top: 0px; } text { font-size: 11px; } rect { fill: none; } div.bar { display: inline-block; width: 20px; height: 75px; /* gets overriden d3-assigned height below */ background-color: teal; margin-right: 2px; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispedges; } .axis text { font-family: sans-serif; 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" > <div id="body"> <div id="footer"> <h3>course scheduler treemap</h3> <div class="hint">click or option-click descend or ascend</div> <div><select> <option value="size">size</option> <option value="count">count</option> </select></div> </div> </div> </div> <div class="col-md-4" > <h1 >plan 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 , height var w = 500; var h = 100; var barpadding = 1; // <-- new! /* var dataset =[] ; (var =0; i<25; i++) { var newnumber = math.round(math.random() * 25); dataset.push(newnumber); }*/ //create svg element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // generating rectangles , making bar chart svg.selectall("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return * (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 bar chart svg.selectall("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("x", function(d, i) { return * (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> </body> </html> ------- same code working when there no div thing in html used , whole javascript code written in body. here code working fine.
--------
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>bar char test</title> <script type="text/javascript" src="d3/d3.v3.js"></script> <style type="text/css"> div.bar { display: inline-block; width: 20px; height: 75px; /* gets overriden d3-assigned height below */ background-color: teal; margin-right: 2px; } </style> </head> <body> <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, 28 ]; //width , height var w = 500; var h = 120; var barpadding = 1; // <-- new! //create svg element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // generating rectangles , making bar chart svg.selectall("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return * (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 bar chart svg.selectall("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("x", function(d, i) { return * (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> </body> </html>
i think "rect" styling using solve purpose. try removing "rect" styling section of css because using "rect" thing svg.
Comments
Post a Comment