d3js / nvd3 - 图形半隐藏

Question

我有一个 d3 / nvd3 图表，它似乎被“剪裁”了一半...... 以下是代码（对不起，很长，但是在 html 文件中复制/粘贴有效）。通常我每小时有一个小节（所以 24 个小节），我只放了三个小时。 html 被分成多个部分：

1. 传奇[g class="nv-x nv-axis" transform="translate(0,235)"]
2. Y轴：[g class="nv-y nv-axis"]
3. 按小时计算一个小节：[g class="nv-barsWrap"]

我们只看到 Y 轴的上半部分和条形图，底部的图例丢失了。但它确实存在于 html 中！我们可以“检查”它......我不明白发生了什么，但有一个我不掌握的“剪辑”矩形......（[clipPath id="nv-x-label-clip-6678"]）

<div id="chart">
  <svg>
    <g class="nvd3 nv-wrap nv-discreteBarWithAxes">
      <g transform="translate(60,15)">
        <defs>
          <clipPath id="nv-x-label-clip-6678">
            <rect width="20.912863070539423" height="16" x="-10.456431535269711">
            </rect>
          </clipPath>
        </defs>
        <g class="nv-x nv-axis" transform="translate(0,235)">
          <g class="nvd3 nv-wrap nv-axis">
            <g>
              <g transform="translate(6.390041493775935,0)" style="opacity: 1;">
                <line class="tick" y2="-235" x2="0">
                </line>
                <text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;">00</text>
              </g>
              <g transform="translate(18.008298755186722,0)" style="opacity: 1;">
                <line class="tick" y2="-235" x2="0">
                </line>
                <text y="3" dy=".71em" transform="translate(0,17)" x="0" style="text-anchor: middle;">01</text>
              </g>
              <g transform="translate(29.62655601659751,0)" style="opacity: 1;">
                <line class="tick" y2="-235" x2="0">
                </line>
                <text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;">02</text>
              </g>

              <path class="domain">
              </path>
              <text class="nv-axislabel" text-anchor="middle" y="36" x="140.00000000000003" transform="translate(0,17)">
              </text>
            </g>
          </g>
        </g>
        <g class="nv-y nv-axis">
          <g class="nvd3 nv-wrap nv-axis">
            <g>
              <g transform="translate(0,235)" style="opacity: 1;">
                <line class="tick zero" x2="280" y2="0">
                </line>
                <text x="-3" dy=".32em" opacity="0" y="0" style="text-anchor: end;">0.0</text>
              </g>
              <g transform="translate(0,192.54290876242095)" style="opacity: 1;">
                <line class="tick" x2="280" y2="0">
                </line>
                <text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;">200.0</text>
              </g>
              <g transform="translate(0,150.0858175248419)" style="opacity: 1;">
                <line class="tick" x2="280" y2="0">
                </line>
                <text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;">400.0</text>
              </g>
            </g>	
          </g>
        </g>
        <g class="nv-barsWrap">
          <g class="nvd3 nv-wrap nv-discretebar" transform="translate(0,0)">
            <g>
              <g class="nv-groups">
                <g class="nv-group nv-series-0" style="stroke-opacity: 1; fill-opacity: 0.75;">
                  <g transform="translate(1.6846473217010498,0)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
                    <rect height="235" width="9.41078838174274" class="discreteBar">
                    </rect>
                  </g>
                  <g transform="translate(13.30290412902832,166.00723266601562)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
                    <rect height="68.99277326106593" width="9.41078838174274" class="discreteBar">
                    </rect>
                  </g>
                  <g transform="translate(24.921161651611328,175.98464965820312)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
                    <rect height="59.01535682023487" width="9.41078838174274" class="discreteBar">
                    </rect>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </svg>
</div>

Answer 1

这很可能是因为容器没有足够的空间来容纳图表。添加height=100% 和width=100% 或一些任意大量像素来测试它（到包含图表的div）。