d3条形图在Firefox中被遮挡，但不在Chrome中 [英] d3 bar chart obscured in firefox but not in chrome
本文介绍了d3条形图在Firefox中被遮挡，但不在Chrome中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我能用Chrome浏览器看到它，但在Firefox中，它的行为就好像某些元素覆盖了它的某个部分。但是，当我在Firefox中查看3D页面时，它显示了矩形，但它们只是在页面上不可见。
我包含了用d3生成的生成的HTML，它在chrome和firefox中的行为有所不同。
< script type =text / javascriptsrc =js / bar_chart.js>< / script>< script type =text / javascriptsrc =d3 / d3.v3.min.js><脚本>< /头>
< body>
< div style =position：fixed;
position：obsolute; / * for ie6 * /
background-color：rgba（0,0,0,1.0）;
height：206px;
width：100％;
top：0px;
right：0px; class =plotid =条形图>
< br>< br>
< p class =bob>< / p>
< svg class =bar>< g transform =translate（20,0）>< line x1 =0x2 =1295y1 =149.5y2 = 149.5style =stroke：#ffffff;>< / line>< line x1 =0x2 =1295y1 =119.5y2 =119.5style =stroke：#cccccc; < / line>< line x1 =0x2 =1295y1 =89.5y2 =89.5style =stroke：#cccccc;>< / line>< line x1 =0x2 =1295y1 =59.5y2 =59.5style =stroke：#cccccc;>< / line>< line x1 =0x2 =1295 29.5y2 =29.5style =stroke：#cccccc;>< / line>< line x1 =0x2 =1295y1 = - 0.5y2 = - 0.5 =stroke：#cccccc;>< / line>< rect x = - 0.5y =119.5width =64height =30fill =steelblue>< / rect> ;< rect x =63.5y =89.5width =64height =60fill =steelblue>< rect>< rect x =127.5y =71.5 =64height =78fill =steelblue>< rect> < / rect>
< / body>
解决方案
这个问题已经在下面的线程中解决了：
SVG呈现，但在Firefox中被切断 - 为什么？
谢谢。
I have strange case with d3 bar chart. I am able to see it fine with chrome, but in firefox it behaves as if some element is overlaying some part of it. But when I viewed the page in 3D in firefox it shows me the rectangles but they are just not visible on page. I am including the generated HTML generated with d3, which in chrome and firefox behave differently.
<script type="text/javascript" src="js/bar_chart.js"></script><script type="text/javascript" src="d3/d3.v3.min.js"></script></head>
<body>
<div style="position:fixed;
position:obsolute;/*for ie6*/
background-color: rgba(0,0,0,1.0);
height:206px;
width: 100%;
top:0px;
right:0px;" class="plot" id="barchart">
<br><br>
<p class="bob"></p>
<svg class="bar"><g transform="translate(20,0)"><line x1="0" x2="1295" y1="149.5" y2="149.5" style="stroke: #ffffff;"></line><line x1="0" x2="1295" y1="119.5" y2="119.5" style="stroke: #cccccc;"></line><line x1="0" x2="1295" y1="89.5" y2="89.5" style="stroke: #cccccc;"></line><line x1="0" x2="1295" y1="59.5" y2="59.5" style="stroke: #cccccc;"></line><line x1="0" x2="1295" y1="29.5" y2="29.5" style="stroke: #cccccc;"></line><line x1="0" x2="1295" y1="-0.5" y2="-0.5" style="stroke: #cccccc;"></line><rect x="-0.5" y="119.5" width="64" height="30" fill="steelblue"></rect><rect x="63.5" y="89.5" width="64" height="60" fill="steelblue"></rect><rect x="127.5" y="71.5" width="64" height="78" fill="steelblue"></rect><rect x="191.5" y="35.5" width="64" height="114" fill="steelblue"></rect>
<rect x="255.5" y="23.5" width="64" height="126" fill="steelblue"></rect><rect x="319.5" y="-0.5" width="64" height="150" fill="steelblue"></rect><rect x="383.5" y="17.5" width="64" height="132" fill="steelblue"></rect><rect x="447.5" y="41.5" width="64" height="108" fill="steelblue"></rect><rect x="511.5" y="59.5" width="64" height="90" fill="steelblue"></rect><rect x="575.5" y="71.5" width="64" height="78" fill="steelblue"></rect><rect x="639.5" y="83.5" width="64" height="66" fill="steelblue"></rect><rect x="703.5" y="77.5" width="64" height="72" fill="steelblue"></rect><rect x="767.5" y="59.5" width="64" height="90" fill="steelblue"></rect><rect x="831.5" y="29.5" width="64" height="120" fill="steelblue"></rect><rect x="895.5" y="41.5" width="64" height="108" fill="steelblue"></rect><rect x="959.5" y="47.5" width="64" height="102" fill="steelblue"></rect><rect x="1023.5" y="53.5" width="64" height="96" fill="steelblue"></rect><rect x="1087.5" y="41.5" width="64" height="108" fill="steelblue"></rect><rect x="1151.5" y="11.5" width="64" height="138" fill="steelblue"></rect><rect x="1215.5" y="-0.5" width="64" height="150" fill="steelblue"></rect><text class="rule" x="0" y="149.5" dx="6" text-anchor="middle" fill="white" font-size="14px">0</text><text class="rule" x="0" y="119.5" dx="6" text-anchor="middle" fill="white" font-size="14px">5</text><text class="rule" x="0" y="89.5" dx="6" text-anchor="middle" fill="white" font-size="14px">10</text><text class="rule" x="0" y="59.5" dx="6" text-anchor="middle" fill="white" font-size="14px">15</text><text class="rule" x="0" y="29.5" dx="6" text-anchor="middle" fill="white" font-size="14px">20</text><text class="rule" x="0" y="-0.5" dx="6" text-anchor="middle" fill="white" font-size="14px">25</text></g></svg></div>
</body>
解决方案
This question is already addressed in the following thread: SVG renders but gets cut off in Firefox only - why? Thank you.
这篇关于d3条形图在Firefox中被遮挡，但不在Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
