javascript - d3.js issues. Appending div -
i have application, should build graphics according values database. should use d3.js use this guide. code of example works fine. here is:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>d3 demo: 5 divs data</title> <script type="text/javascript" src="../d3/d3.v3.min.js"></script> <style type="text/css"> div.bar { display: inline-block; width: 20px; height: 75px; /* gets overriden d3-assigned height below */ background-color: teal; } </style> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectall("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style("height", function(d) { return d + "px"; }); </script> </body> </html> here part of code, doesn't work reason:
d3.select("body").selectall("p.bar") .data(prices) .enter() .append("p") .attr("class","bar") .style("height",function(d){ return d+"px"; }); here full index.html:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <title>insert title here</title> </head> <style> div.bar { display: inline-block; width: 20px; height: 75px; background-color: teal; } </style> <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <body> <form action="./companylist" class="form-horizontal" > Начало периода: <input type="text" name="begindate" id="begindate"></input> Конец периода: <input type="text" name="enddate" id="enddate"></input> <input type="submit"></input> <div id="listofcompanies"> <h1>Список компаний</h1> <script> $(document).ready(function(){ $.ajax({ method:"post", url: "./companylist", data: {"begindate":$("#begindate").text(),"enddate":$("#enddate").text()}, success: function(output){ $("#listofcompanies").html(output); $("#result").html("it works fine"); }, error:function(){ alert("failure"); $("#result").html('there error while submit'); } }); }); </script> </div> </form> <div id="result"> </div> <div id="invisible" > </div> <div id="invisible1" > 123 </div> <script> $(".form-horizontal").submit(function( event ) { event.preventdefault(); var request=$.ajax({ method:"post", url: "./listofprices", data: {"begindate":$("#begindate").val(),"enddate":$("#enddate").val(),"company":$(".company:checked").val()}, success: function(result){ $("#invisible").html(result); }, error:function(){ alert("failure"); $("#result").html('there error while submit'); } }); $( document ).ajaxcomplete(function(){ var tmp=$("#invisible").text().split("+"); var dates=tmp[0].split("|"); var prices=tmp[1].split("|"); var monthabbreviations = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; var formatteddates=new array(); (var i=0;i<dates.length;i++){ var tmpdate=new date(dates[i]); var day = tmpdate.getutcdate(); var mo = monthabbreviations[tmpdate.getutcmonth()]; var yr = tmpdate.getutcfullyear(); var formatteddate = day + '-' + mo + '-' + yr; formatteddates.push(formatteddate); } console.log(prices); d3.select("body").selectall("p") .data(prices) .enter() .append("div") .attr("class","bar") .style("height",function(d){ return prices+"px"; }) //.style("margin-right","2px"); }); }); </script> </body> </html> that doesn't append height divs. also, when change selectall("div"); there no divs added. can explain?
you forgot semicolon, because commented last line. should reference "d" instead of "prices" inside 'height-style-function', lars kotthoff commented. might problem put div inside p-element. i'm not sure that. if first 2 hints don't help, try change appended "div" "p"-element , don't forget modify css then.
d3.select("body").selectall("p") .data(prices) .enter() .append("div") .attr("class","bar") .style("height",function(d){ return d+"px"; });
Comments
Post a Comment