javascript - Bootstrap row stays at 1px when inserting d3 -

-

i have been trying make responsive dashboard using d3. have previous experience haven't used bootstrap extensively before. posts have researched mentioned using bootstrap , viewbox make d3 svg's reactive.

however, when tried found svg's didn't show up. bootstrap row remains @ 1px of height after have entered svg. more weird if hard-code svg height = 960 width = 500 (i.e. hard-coded in html) row still remains @ 1px.

i've looked everywhere can't find wrong. great!

<!doctype html> <meta charset="utf-8"> <head>     <script src="js/d3.v3.min.js"></script>   <script src="js/jquery-1.10.2.min.js"></script>   <link rel="stylesheet" href="css/bootstrap.css">   <script src="js/bootstrap.js"></script>    <link rel="stylesheet" href="css/mainindex.css">    <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container">   <h1>my first bootstrap page</h1>   <p>this text.</p>     <div class ="row">     <div class="col-sm-8" id = "barchartdiv"> </div>     <div class="col-sm-4" id = "leftovers"> stuff here </div>   </div>    <div class="row">     <div class="col-md-6">another chart here </div>     <div class="col-md-6"></div> </div> <script>    d3.json("data/pdoconnection.php", function(error, data) {      dataset = data;      console.log(dataset);     console.log("data retrieved")   var margin = {top: 20, right: 20, bottom: 50, left: 60},     dynwidth = 960,     aspect = 500/960,     width = dynwidth - margin.left - margin.right,     height = dynwidth*aspect - margin.top - margin.bottom;   var x = d3.scale.ordinal()     .rangeroundbands([0, width], .1);  var y = d3.scale.linear()     .range([height, 0]);  var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom");  var yaxis = d3.svg.axis()     .scale(y)     .orient("left")     .ticks(10);  var svg = d3.select("#barchartdiv").append("svg")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)     .append("g")     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    x.domain(dataset.map(function (d) { return d.sortorder; }));    y.domain([d3.min(dataset.map(function (d) { return d.ipcount; })), d3.max(dataset.map(function (d) { return d.ipcount; }))]);     svg.append("g")       .attr("class", "x axis")       .attr("transform", "translate(0," + height + ")")       .call(xaxis);    svg.append("g")       .attr("class", "y axis")       .call(yaxis)     .append("text")       .attr("transform", "rotate(-90)")       .attr("y", 6)       .attr("dy", ".71em")       .style("text-anchor", "end")       .text("number of hits (ips)");    svg.selectall(".bar")       .data(dataset)       .enter().append("rect")       .attr("class", function(d) { return d.ipcount < 0 ? "bar negative" : "bar positive"; })       .attr("x", function(d) { return x(d.sortorder)+10; })       .attr("width", (x.rangeband() - 20))       .attr("y", function(d) { return y(math.max(0, d.ipcount)); })       .attr("height", function(d) { return math.abs(y(0) - y(d.ipcount)) ; })       .attr("rx", 15)       .attr("ry", 15);  });   </script> </body>


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more