Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

chart pie origin problem

$
0
0

Hi,

I try to add  chart pie on my html files. I use D3js library for this.

 

I create on symbol where i put one rectangle. The shape label's is "Rectangle"

 

I add this follow code in my first frame

 

 

var testdata=[
{key:"label1",y:15.3,autre:"milliard"},
{key:"label 2",y:5.4,autre:"milliard"},
{key:"label3",y:5.4,autre:"milliard"},
{key:"Vinci energies",y:9,autre:"milliard"}];
sym.$('Rectangle').append('<svg id="graph"></svg>');




nv.addGraph(function() {
                var width = 1024,                    height = 768;                var chart = nv.models.pieChart()                    .x(function(d) { return d.key })                    .y(function(d) { return d.y })                    //.showLabels(true)                    .values(function(d) { return d })                    .color(d3.scale.category10().range())                    .width(width)                    .height(height)                    .tooltipContent(function(key, y, e, graph) {  return '<h3>' + key + '</h3>' +'<p>' + y + '&euro; soit '+e.point.autre+' %</p>' ; });                  d3.select("#graph")                      .datum([testdata])                    .transition().duration(200)                     //.attr('-webkit-transform-origin-x','100%')                      .attr('width', width)                      .attr('height', height)                      .call(chart);            //chart.dispatch.on('legendClick', function(d,i) { console.log(d,i) });                //chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });                return chart;            });

 

When i launch the page , my pie chart is displayed but the origin of my svg is not correct (only with webkit browser)Capture d’écran 2013-08-10 à 10.31.30.png

 

With firefox the pie chart is in good place

 

 

When i look the generate css (with webkit browser), i find this property  :

 

html|* > svg {
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
}

 

 

On firefox there isn't svg css property

 

 

I don't know how to resolve the problem. I try to add some css property to change the origin point but this doesn't work.


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>