【问题标题】:d3 bar chart obscured in firefox but not in chromed3条形图在firefox中模糊但在chrome中没有
【发布时间】:2013-02-14 10:01:17
【问题描述】:

我对 d3 条形图有奇怪的情况。 我可以用 chrome 很好地看到它,但在 Firefox 中,它的行为就好像某些元素覆盖了它的某些部分。但是当我在 Firefox 中查看 3D 页面时,它向我显示了矩形,但它们在页面上不可见。 我将使用 d3 生成的 HTML 包括在内,它在 chrome 和 firefox 中的行为不同。

<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>

【问题讨论】:

    标签: javascript html google-chrome firefox d3.js


    【解决方案1】:

    这个问题已经在以下线程中得到解决: SVG renders but gets cut off in Firefox only - why? 谢谢。

    【讨论】:

      猜你喜欢
      • 2015-09-25
      • 1970-01-01
      • 2014-06-29
      • 2019-05-03
      • 2012-02-15
      • 2020-11-17
      • 2015-07-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多