Dimple js 绘图在 Firefox 中无法正确缩放

Posted 2023-02-22

【中文标题】Dimple js 绘图在 Firefox 中无法正确缩放

【英文标题】：Dimple js plot not scaling correctly in Firefox

【发布时间】：2015-11-15 19:01:48

【问题描述】：

我制作了一些带有酒窝的图表，它们在 chromium (v 43) 中看起来不错，但在 Firefox (v 40) 中它们呈现不正确。

我在调试器中检查了该页面，我可以看到<svg> 标记下有一个<g> 标记。检查器将 g 标签在 chrome 中显示为 720x556，在 firefox 中显示为 730x97，这显然会导致绘图失真。

同样的问题出现在许多图表上 - 气泡图、折线图和条形图。

我正在使用凹坑 2.1.6 和 d3 3.5.6

这是我的代码示例：

link: function(scope, element, attrs) 
  var svg = dimple.newSvg(element[0], 800, 600);
  svg.text("Charttitle");
  var myChart = new dimple.chart(svg, data);

  myChart.addCategoryAxis("x", "column1");
  myChart.addCategoryAxis("y", "column2");
  myChart.addCategoryAxis("z", "column3");
  myChart.addSeries("column1", dimple.plot.bubble);

  myChart.draw();

<div ng-view class="ng-scope">
  <div class="col-md-12 ng-scope" ng-controller="MyController">
    <traffic-plot val="p2pTraffic" load-data="loadData(ip)" class="ng-isolate-scope">
      <svg  >
        <g>
           <!-- The rest of the dimple generated code -->
        </g>
      </svg>
   </traffic-plot>
 </div>
</div>

有什么建议可以解决这个问题吗？

编辑：在做了一些研究之后，我发现<g> 是一个用于对图形元素进行分组的容器元素，它允许将组元素（在本例中为 svg）作为一个元素处理。 在元素检查器中，svg 似乎具有正确的大小，但*** <g> 没有。 我怀疑 Chrome 默认会以 100% 的高度/宽度呈现它，而 Firefox 会根据其中元素的大小来呈现它。

【问题讨论】：

在这种情况下element 是什么？

查看修改后的问题。基本上是 svg 将附加的父元素。

是页面上的 div 还是 元素？

有一个div。查看更新的问题。

【参考方案1】：

根据this dimple issue，我将父元素的样式设置为“display:block”，现在绘图在 Firefox 中可以正确缩放。

这是一个使用角度的例子：

<my-test-plot style="display:block" val="sourceData" /> 

这被扩展为：

<my-test-plot class="ng-isolate-scope" ... val="sourceData" style="display:block">
  <svg>
     ...
  </svg>
</my-test-plot>

【参考方案2】：

您没有指定单位。 我会尝试添加“600px”而不是 600。

对于 CSS2 中定义的属性，必须提供长度单位标识符。

【讨论】：

好主意，但事实并非如此。