Guys, sorry for so many questions, but before you ask I'm looking everywhere and realize many tests.
See I have two graphs, one in CCC that perfect, and another in Protovis this one a bug, see that when I move the mouse over a slice of Protovis he moves correctly, the slice moves up another slice.
This correct the code below? I took this as a reference site (http://mbostock.github.io/protovis/docs/wedge.html)
this highlighted the functions that make the slice move.
Chart.png
See I have two graphs, one in CCC that perfect, and another in Protovis this one a bug, see that when I move the mouse over a slice of Protovis he moves correctly, the slice moves up another slice.
This correct the code below? I took this as a reference site (http://mbostock.github.io/protovis/docs/wedge.html)
this highlighted the functions that make the slice move.
Code:
var partition = vis.add(pv.Layout.Partition.Fill)
.nodes(pv.dom(flare).root("").nodes())
.size(function(d) { return d.nodeValue; } )
.order("descending")
.orient("radial");
partition.node.add(pv.Wedge)
.def("o", -1) // define uma variavel
.cursor("pointer") // altera o ponteiro do mouse
.event("mouseover", function() { return this.o(this.index) ; } ) // altera o valor da variavel para o item selecionado
.event("mouseout", function() { return this.o(-1) ; } ) // altera o valor da varial para o padrao
.left(function(d) {
var varLef = 90
+ Math.cos(this.startAngle() + this.angle() / 2 )
* ((this.o() == this.index && d.nodeValue > 0 ) ? 10 : 0);
return varLef;
})
.bottom(function(d) {
var varBot = 90
- Math.sin( this.startAngle() + this.angle() / 2 )
* ((this.o() == this.index && d.nodeValue > 0 ) ? 10 : 0);
return varBot;
})
// Abilita o tooltip
.text(function(d) { return d.firstChild ? 'Gerente :' + d.nodeName : '<div style="text-align: left;">Gerente :' + d.parentNode.nodeName + '<br/>' + d.nodeName + ' :' + d.nodeValue.toFixed(2) + '</div>'; } )
.event("mouseover", pv.Behavior.tipsy({gravity: 's', fade: true, html: true}))
// box title
//.title(function(d) { return d.firstChild ? d.nodeName : d.nodeName + ' :' + d.nodeValue; } )
// cor da fatia
.fillStyle(function(d) {
var grey = pv.rgb(144, 144, 144, .2);
var GerenteSelect = par_NomeGerente;
if(GerenteSelect == '[ Todos ]' ) {
// quando nao ha nenhum gerente selecionado
var cor = d.firstChild && d.nodeName.length == 0 ? 'white' : // item central (miolo)
d.firstChild && d.nodeName == '-- x --' ? 'white' : // caso cliente sem gerente
d.firstChild && d.nodeName != '-- x --' ? '#9A9FAE' : // fatia do gerente de cliente com gerente
d.nodeValue > 0 && d.parentNode.nodeName == '-- x --' ? 'white' : // fatia do gerente de cliente sem gerente
d.nodeName == 'realizada' ? 'rgb(174,199,232)' : 'rgb(255,187,120)';
}
return cor;
} )
// cor da linha
.strokeStyle(function(d) {
return d.firstChild && d.nodeName.length == 0 ? 'black' : 'white';
} )
.lineWidth(0.5)
);
partition.label.add(pv.Label)
.visible(0);
// visualizar os labels
//.visible(function(d) d.angle * d.outerRadius >= 6);