Dimple js plot not scaling correctly in Firefox

V

2

10

I made a few charts with dimple and they look OK in chromium (v 43), but in Firefox (v 40) they are rendered incorrectly.

I inspected the page in the debugger and I can see that under the <svg> tag there is a <g> tag. The inspector shows the g tag in chrome as 720x556 and in firefox as 730x97, which obviously results in a distorted plot.

The same problem occurs on a number of plots - bubble, line and bar charts.

I'm using dimple 2.1.6 and d3 3.5.6

Here is an example of my code:

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 width="800" height="600">
        <g>
           <!-- The rest of the dimple generated code -->
        </g>
      </svg>
   </traffic-plot>
 </div>
</div>

Any suggestions how to fix this?

Edit: After doing some research I found that the <g> is a container element used for grouping graphic elements that allows the group elements, in this case svg, to be handled as one element. In the element inspector, the svg appears to have the correct size, but the top level <g>does not. I suspect that Chrome default renders it with 100% height / width, while Firefox renders it depending on the sizes of the elements in it.

Vair answered 21/8, 2015 at 18:22 Comment(4)

what is element in this case? – Benzofuran 22/8, 2015 at 15:20

See modified question. Basically the parent element where the svg will attach. – Vair 24/8, 2015 at 18:39

is it a div on the page or is it the <body> element? – Benzofuran 24/8, 2015 at 21:10

There is a div. See updated question. – Vair 25/8, 2015 at 16:18

V

3

As per this dimple issue, I set the parent element's style to "display:block" and now the plots are scaling correctly in Firefox.

Here is an example using angular:

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

This gets expanded to:

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

Vair answered 14/9, 2015 at 13:26 Comment(0)

T

1

You did not specify a unit. I would try to add "600px" instead of just 600.

For properties defined in CSS2, a length unit identifier must be provided.

Tripalmitin answered 10/9, 2015 at 17:17 Comment(1)

Good idea, but that's not it. – Vair 10/9, 2015 at 17:43

Recommended topics

Hot tags