javascript - 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)。