d3.js - How to show all data elements using D3 and Bootstrap? -


just started d3 , html below supposed show vertical bars per array (5 bars) instead shows 3 bars.

<!doctype html> <html> <head lang="en">     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title></title>     <link rel="stylesheet" href="css/bootstrap.min.css"/>     <style type="text/css">         div.bar {             display: inline-block;             width: 20px;             height: 75px;             background-color: teal;         }     </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">     <div class="container">         <div class="navbar-header">             <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar"                     aria-expanded="false" aria-controls="navbar">                 <span class="sr-only">toggle navigation</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>             <a class="navbar-brand" href="#">d3</a>         </div>     </div> </nav> <script type="text/javascript" src="js/d3.js"></script> <script type="text/javascript">     var dataset = [5, 10, 15, 20, 25];      d3.select("body")             .selectall("div")             .data(dataset)             .enter()             .append("div")             .attr("class", "bar"); </script> </body> </html>

however, if move <script>...</script> before nav, see correct number of bars (5). performance reasons maintain original order , yet resolved. ideas?

in current implementation, when call selectall("div"), resulting selection contains 2 <div> elements present in dom (class container , class navbar-header). first 2 data values (5 , 10) associated 2 <div> elements. remaining 3 data values (15, 20, , 25) values in enter() selection.

an easy fix use selectall("div.bar") instead, though might want re-read d3.js documentation better understand why original code wrong.


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more