d3js/nvd3-图形半隐藏

d3js / nvd3 - graph half hidden

本文关键字:隐藏 图形 nvd3- d3js      更新时间:2023-09-26

我有一个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>

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