我有一个d3 / nvd3图,似乎被“剪断”了一半...
后面是代码(很抱歉,很长,但是可以在html文件中进行复制/粘贴)。通常我每小时只有一个酒吧(所以24个酒吧),这里我只放三个小时。
html分为几个部分:
传说[g class="nv-x nv-axis" transform="translate(0,235)"]
Y轴:[g class="nv-y nv-axis"]
一小时的酒吧:[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中)。