title: d3js / nvd3 - graph half hidden
body: <p>I have a d3 / nvd3 graph which seems to be "clipped" by half... 
  Hereafter is the code (sorry, quite long, but a copy/paste in an html file works). Normally I have one bar by hour (so 24 bars) here I put only three hours. 
  The html is splitter in sections : </p>
  
  <ol>
  <li>The legend <code>[g class="nv-x nv-axis" transform="translate(0,235)"]</code></li>
  <li>Y axis: <code>[g class="nv-y nv-axis"]</code></li>
  <li>One bar by hours: <code>[g class="nv-barsWrap"]</code></li>
  </ol>
  
  <p>We see only the top half of the Y axis and Bars, the bottom legend is lost. But it does exist on the html ! and we can "inspect" it... I don't get what is happening, but there is this "clip" rectangle I don't master... ( <code>[clipPath id="nv-x-label-clip-6678"]</code> )</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="chart"&gt;
    &lt;svg&gt;
      &lt;g class="nvd3 nv-wrap nv-discreteBarWithAxes"&gt;
        &lt;g transform="translate(60,15)"&gt;
          &lt;defs&gt;
            &lt;clipPath id="nv-x-label-clip-6678"&gt;
              &lt;rect width="20.912863070539423" height="16" x="-10.456431535269711"&gt;
              &lt;/rect&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
          &lt;g class="nv-x nv-axis" transform="translate(0,235)"&gt;
            &lt;g class="nvd3 nv-wrap nv-axis"&gt;
              &lt;g&gt;
                &lt;g transform="translate(6.390041493775935,0)" style="opacity: 1;"&gt;
                  &lt;line class="tick" y2="-235" x2="0"&gt;
                  &lt;/line&gt;
                  &lt;text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;"&gt;00&lt;/text&gt;
                &lt;/g&gt;
                &lt;g transform="translate(18.008298755186722,0)" style="opacity: 1;"&gt;
                  &lt;line class="tick" y2="-235" x2="0"&gt;
                  &lt;/line&gt;
                  &lt;text y="3" dy=".71em" transform="translate(0,17)" x="0" style="text-anchor: middle;"&gt;01&lt;/text&gt;
                &lt;/g&gt;
                &lt;g transform="translate(29.62655601659751,0)" style="opacity: 1;"&gt;
                  &lt;line class="tick" y2="-235" x2="0"&gt;
                  &lt;/line&gt;
                  &lt;text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;"&gt;02&lt;/text&gt;
                &lt;/g&gt;
  
                &lt;path class="domain"&gt;
                &lt;/path&gt;
                &lt;text class="nv-axislabel" text-anchor="middle" y="36" x="140.00000000000003" transform="translate(0,17)"&gt;
                &lt;/text&gt;
              &lt;/g&gt;
            &lt;/g&gt;
          &lt;/g&gt;
          &lt;g class="nv-y nv-axis"&gt;
            &lt;g class="nvd3 nv-wrap nv-axis"&gt;
              &lt;g&gt;
                &lt;g transform="translate(0,235)" style="opacity: 1;"&gt;
                  &lt;line class="tick zero" x2="280" y2="0"&gt;
                  &lt;/line&gt;
                  &lt;text x="-3" dy=".32em" opacity="0" y="0" style="text-anchor: end;"&gt;0.0&lt;/text&gt;
                &lt;/g&gt;
                &lt;g transform="translate(0,192.54290876242095)" style="opacity: 1;"&gt;
                  &lt;line class="tick" x2="280" y2="0"&gt;
                  &lt;/line&gt;
                  &lt;text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;"&gt;200.0&lt;/text&gt;
                &lt;/g&gt;
                &lt;g transform="translate(0,150.0858175248419)" style="opacity: 1;"&gt;
                  &lt;line class="tick" x2="280" y2="0"&gt;
                  &lt;/line&gt;
                  &lt;text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;"&gt;400.0&lt;/text&gt;
                &lt;/g&gt;
              &lt;/g&gt; 
            &lt;/g&gt;
          &lt;/g&gt;
          &lt;g class="nv-barsWrap"&gt;
            &lt;g class="nvd3 nv-wrap nv-discretebar" transform="translate(0,0)"&gt;
              &lt;g&gt;
                &lt;g class="nv-groups"&gt;
                  &lt;g class="nv-group nv-series-0" style="stroke-opacity: 1; fill-opacity: 0.75;"&gt;
                    &lt;g transform="translate(1.6846473217010498,0)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;"&gt;
                      &lt;rect height="235" width="9.41078838174274" class="discreteBar"&gt;
                      &lt;/rect&gt;
                    &lt;/g&gt;
                    &lt;g transform="translate(13.30290412902832,166.00723266601562)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;"&gt;
                      &lt;rect height="68.99277326106593" width="9.41078838174274" class="discreteBar"&gt;
                      &lt;/rect&gt;
                    &lt;/g&gt;
                    &lt;g transform="translate(24.921161651611328,175.98464965820312)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;"&gt;
                      &lt;rect height="59.01535682023487" width="9.41078838174274" class="discreteBar"&gt;
                      &lt;/rect&gt;
                    &lt;/g&gt;
                  &lt;/g&gt;
                &lt;/g&gt;
              &lt;/g&gt;
            &lt;/g&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>