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 + '€ 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)
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.