Skip to content

Commit

Permalink
fix bug piechart + fix couleurs & animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@Symro
Symro committed Jun 13, 2014
1 parent 8d95e44 commit e188fdc
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 21 deletions.
11 changes: 10 additions & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1338,7 +1338,16 @@ svg.barChart .circleTopTransparent{
}
#pieChart .text{
position:absolute;
left:340px;
left:305px;
top:120px;
width:80px;
text-align:center;
font-size:30px;
font-weight:bold;
}
#pieChart .text2{
position:absolute;
left:330px;
top:120px;
width:80px;
text-align:center;
Expand Down
225 changes: 205 additions & 20 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,14 @@ $(document).ready(function() {
"opacity": "1"
});

d3.select(".pieChartLegend1 text")
.transition().duration(500)
.style('fill', '#fff');

d3.select(".pieChartLegend1 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#307BB2');

} else {

var item = $("<div class='text'>" + parseInt(dataGraph[1]) + "<span>%</span></div>").hide().fadeIn(250);
Expand All @@ -491,6 +499,15 @@ $(document).ready(function() {
"opacity": "1"
});

d3.select(".pieChartLegend0 text")
.transition().duration(500)
.style('fill', '#fff');

d3.select(".pieChartLegend0 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#307BB2');


}

})
Expand All @@ -504,26 +521,42 @@ $(document).ready(function() {

d3.select(".pieChart g .arc0")
.transition().duration(500)
.attr('fill', '#22313b');
.attr('fill', '#264359');

d3.select("#pieChart .rectData1")
.transition().duration(500)
.style({
"opacity": "0"
});

d3.select(".pieChartLegend1 text")
.transition().duration(500)
.style('fill', '#888888');

d3.select(".pieChartLegend1 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#264359');

} else {

d3.select(".pieChart g .arc1")
.transition().duration(500)
.attr('fill', '#264359');
.attr('fill', '#22313b');

d3.select("#pieChart .rectData0")
.transition().duration(500)
.style({
"opacity": "0"
});

d3.select(".pieChartLegend0 text")
.transition().duration(500)
.style('fill', '#888888');

d3.select(".pieChartLegend0 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#22313b');

}

});
Expand All @@ -549,6 +582,158 @@ $(document).ready(function() {

}

d3.selectAll(".pieChartLegend g")
.style("cursor", "pointer")
.on("mouseover", function(d, i) {

if (i == 2) {

console.log(i);

var item = $("<div class='text2'>" + parseInt(dataGraph[2]) + "<span>%</span></div>").hide().fadeIn(250);
$("#pieChart").append(item);

d3.select(".pieChart g .arc2")
.transition().duration(500)
.attr('fill', '#307BB2');

d3.select("#pieChart .rectData2")
.transition().duration(500)
.style({
"opacity": "1"
});

d3.select(".pieChartLegend2 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#307BB2');

d3.select(".pieChartLegend2 text")
.transition().duration(500)
.style('fill', '#fff');

} else if (i == 1) {

console.log(i);

var item = $("<div class='text2'>" + parseInt(dataGraph[1]) + "<span>%</span></div>").hide().fadeIn(250);
$("#pieChart").append(item);

d3.select(".pieChart g .arc1")
.transition().duration(500)
.attr('fill', '#307BB2');

d3.select("#pieChart .rectData1")
.transition().duration(500)
.style({
"opacity": "1"
});

d3.select(".pieChartLegend1 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#307BB2');

d3.select(".pieChartLegend1 text")
.transition().duration(500)
.style('fill', '#fff');

} else {

console.log(i);

var item = $("<div class='text2'>" + parseInt(dataGraph[0]) + "<span>%</span></div>").hide().fadeIn(250);
$("#pieChart").append(item);

d3.select(".pieChart g .arc0")
.transition().duration(500)
.attr('fill', '#307BB2');

d3.select("#pieChart .rectData0")
.transition().duration(500)
.style({
"opacity": "1"
});

d3.select(".pieChartLegend0 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#307BB2');

d3.select(".pieChartLegend0 text")
.transition().duration(500)
.style('fill', '#fff');

}

})
.on("mouseleave", function(d, i) {

$('#pieChart .text2').fadeOut(250, function() {
$(this).remove();
});

if (i == 2) {

d3.select(".pieChart g .arc2")
.transition().duration(500)
.attr('fill', '#22313b');

d3.select("#pieChart .rectData2")
.transition().duration(500)
.style({
"opacity": "0"
});

d3.select(".pieChartLegend2 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#22313b');

d3.select(".pieChartLegend2 text")
.transition().duration(500)
.style('fill', '#888888');

} else if (i == 1) {

d3.select(".pieChart g .arc1")
.transition().duration(500)
.attr('fill', '#264359');

d3.select("#pieChart .rectData1")
.transition().duration(500)
.style({
"opacity": "0"
});

d3.select(".pieChartLegend1 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#264359');

d3.select(".pieChartLegend1 text")
.transition().duration(500)
.style('fill', '#888888');

} else {

d3.select(".pieChart g .arc0")
.transition().duration(500)
.attr('fill', '#285576');

d3.select("#pieChart .rectData0")
.transition().duration(500)
.style({
"opacity": "0"
});

d3.select(".pieChartLegend0 rect:nth-child(2)")
.transition().duration(500)
.style('fill', '#285576');

d3.select(".pieChartLegend0 text")
.transition().duration(500)
.style('fill', '#888888');

}

});

} else {
$('#pieChart').hide();
}
Expand Down Expand Up @@ -1290,7 +1475,7 @@ $(document).ready(function() {
.attr('height', 300);


var color = ["#264359", "#22313b", "#285576"];
var color = ["#285576", "#264359", "#22313b"];

// On dessine les arcs
var pathPie = $svgPie.selectAll("path")
Expand Down Expand Up @@ -1331,7 +1516,7 @@ $(document).ready(function() {
.attr("height", "45")
.style({
"fill": "#282828",
"opacity": "1"
"opacity": "0"
});
legend.select(".pieChartLegend1").append("rect")
.attr('class', 'rectData1')
Expand All @@ -1341,31 +1526,31 @@ $(document).ready(function() {
.attr("height", "45")
.style({
"fill": "#282828",
"opacity": "1"
"opacity": "0"
});
legend.select(".pieChartLegend2").append("rect")
.attr('class', 'rectData1')
.attr('class', 'rectData2')
.attr("x", 10)
.attr("y", 110)
.attr("width", "210")
.attr("height", "45")
.style({
"fill": "#282828",
"opacity": "1"
"opacity": "0"
});
legend.select(".pieChartLegend0").append("rect")
.attr("x", 20)
.attr("y", 24)
.attr("width", "20")
.attr("height", "20")
.style({
"fill": "#22313b",
"fill": "#285576",
"stroke": "#1f1e1e",
"stroke-width": "5"
});
legend.select(".pieChartLegend1").append("rect")
.attr("x", 20)
.attr("y", 70)
.attr("y", 74)
.attr("width", "20")
.attr("height", "20")
.style({
Expand All @@ -1375,20 +1560,20 @@ $(document).ready(function() {
});
legend.select(".pieChartLegend2").append("rect")
.attr("x", 20)
.attr("y", 116)
.attr("y", 123)
.attr("width", "20")
.attr("height", "20")
.style({
"fill": "#285576",
"fill": "#22313b",
"stroke": "#1f1e1e",
"stroke-width": "5"
});

legend.select(".pieChartLegend0").append('line')
.attr("x1", 50)
.attr("x2", 89)
.attr("y1", 35)
.attr("y2", 35)
.attr("y1", 34)
.attr("y2", 34)
.style({
"stroke-dasharray": "3.3",
"stroke-linecap": "round",
Expand All @@ -1398,8 +1583,8 @@ $(document).ready(function() {
legend.select(".pieChartLegend1").append('line')
.attr("x1", 50)
.attr("x2", 89)
.attr("y1", 80)
.attr("y2", 80)
.attr("y1", 84)
.attr("y2", 84)
.style({
"stroke-dasharray": "3.3",
"stroke-linecap": "round",
Expand All @@ -1409,8 +1594,8 @@ $(document).ready(function() {
legend.select(".pieChartLegend2").append('line')
.attr("x1", 50)
.attr("x2", 89)
.attr("y1", 125)
.attr("y2", 125)
.attr("y1", 134)
.attr("y2", 134)
.style({
"stroke-dasharray": "3.3",
"stroke-linecap": "round",
Expand All @@ -1419,7 +1604,7 @@ $(document).ready(function() {
});
legend.select(".pieChartLegend0").append("text")
.attr("x", 95)
.attr("y", 40)
.attr("y", 38)
.text(function(d) {
return "Publics";
})
Expand All @@ -1431,7 +1616,7 @@ $(document).ready(function() {
});
legend.select(".pieChartLegend1").append("text")
.attr("x", 95)
.attr("y", 85)
.attr("y", 88)
.text(function(d) {
return "Privés non lucratif";
})
Expand All @@ -1443,7 +1628,7 @@ $(document).ready(function() {
});
legend.select(".pieChartLegend2").append("text")
.attr("x", 95)
.attr("y", 130)
.attr("y", 138)
.text(function(d) {
return "Privés lucratifs";
})
Expand Down

0 comments on commit e188fdc

Please sign in to comment.