Bonjour,
J'ai un graphique composé de plusieurs bulles.
Voici les 2 fichiers d'où est issu le graphique :
index.html :
flare.json :
A partir de ceci, je sais comment faire pour rendre la bulle rouge lorsque je clique dessus.
Je sais aussi comment faire pour afficher une alerte quand je clique sur la bulle (par exemple affiche "toto").
Or, je n'arrive pas à récupérer la valeur du texte du cercle (càd le texte qui est dans la bulle) pour l'afficher automatiquement dans le message d'alerte.
Pouvez vous m'aider à trouver une solution svp ?
Merci
J'ai un graphique composé de plusieurs bulles.
Voici les 2 fichiers d'où est issu le graphique :
index.html :
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: 9px sans-serif;
cursor:pointer;
}
circle{
cursor:pointer;
}
</style>
<!--<body onclick="alert('toto')">-->
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="d3-master"></script>
<script>
var diameter = 350, //lm modif : taille graphique
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("flare.json", function(error, root) {
if (error) throw error;
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node") //lm modif : cette ligne qui affiche le bubble chart, mais ne change plus les couleurs lorsqu'on clique sur une bulle
.attr("id", function(d) { return "circle"+d.id; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
//lm modif : début met les tooltip
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
//lm modif : fin met les tooltip
//lm modif : début pour ajouter le cercle vert autour du titre + pour rendre les bulles cliquables et changer la couleur de la bulle sélectionnée
//lm modif : colore toutes les bulles
/* node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "#D8D826")
.on("click", click);
function click(d){
//console.log("toto");
node.select("circle").style("fill","#FF00FF");
};*/
//lm modif : début créé les bulles et colore qu'1 seule bulle
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "#D8D826")
.on("click", click);
function click(d){
console.log(d);
//alert("toto");
//d3.select(".node").style("fill","#FF00FF"); //lm modif : colore le texte du cercle
//d3.select("circle").style("fill","#FF3333");
if(d3.select(d)){
d3.selectAll("circle").style("fill","#D8D826");
d3.select("#circle"+d.id).select("circle").style("fill","#FF3333");
//alert(name); //lm modif : pour récupérer la valeur au clic
};
};
//lm modif : fin met les bulles et colore qu'1 seule bulle
//.style("fill", function(d) { return color(d.packageName); });
//lm modif : fin pour ajouter le cercle vert autour du titre
//lm modif : début met les noms dans les cercles et colore le texte d'une seule bulle
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); })
.on("click",clicktext);
function clicktext(d){
//if(d3.select(this)){
//node.select("circle").style("fill","#D8D826"); //lm modif : pour réinitialiser les bulles en vert
//d3.select("circle").style("fill","#FF3333"); //lm modif : là ca colore le root : dire qu'on veut colorer le crcle du this selectionné
if(d3.select(d)){
d3.selectAll("circle").style("fill","#D8D826");
d3.select("#circle"+d.id).select("circle").style("fill","#FF3333");
//alert(name); //lm modif : pour récupérer la valeur au clic
};
};
});
//lm modif : fin met les noms dans les cercles et colore le texte d'une seule bulle
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size, id: node.id});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"></script>flare.json :
{
"children": [
{
"children": [
{
"children": [
{"id":"1", "name": "Petrol", "size": 10800},
{"id":"2", "name": "Electricity", "size": 10600},
{"id":"3", "name": "Technology", "size": 10400},
{"id":"4", "name": "Oleoduc", "size": 10200},
{"id":"5", "name": "International", "size": 10000},
{"id":"6", "name": "Future", "size": 9800},
{"id":"7", "name": "Agglomeration", "size": 9600},
{"id":"8", "name": "Plastic", "size": 9400},
{"id":"9", "name": "Hierarchie", "size": 9200},
{"id":"10", "name": "City", "size": 9000},
{"id":"11", "name": "Keyword", "size": 8800},
{"id":"12", "name": "Map", "size": 8600},
{"id":"13", "name": "Firm", "size": 8400},
{"id":"14", "name": "Manufacture,g", "size": 8200},
{"id":"15", "name": "World", "size": 8000},
{"id":"16", "name": "Documents", "size": 7800},
{"id":"17", "name": "Communication", "size": 7600},
{"id":"18", "name": "Community", "size": 7400},
{"id":"19", "name": "Structure", "size": 7200},
{"id":"20", "name": "Infrastructure", "size": 7000},
{"id":"21", "name": "Law", "size": 6800},
{"id":"22", "name": "Mountain", "size": 6600},
{"id":"23", "name": "Sea", "size": 6400},
{"id":"24", "name": "Tree", "size": 6200},
{"id":"25", "name": "Green", "size": 6000},
{"id":"26", "name": "Nature", "size": 5800},
{"id":"27", "name": "Paper", "size": 5600},
{"id":"28", "name": "Chemical", "size": 5400},
{"id":"29", "name": "Bus", "size": 5200},
{"id":"30", "name": "Email", "size": 5000},
{"id":"31", "name": "Economy", "size": 4800},
{"id":"32", "name": "Phone", "size": 4600},
{"id":"33", "name": "Pollution", "size": 4400},
{"id":"34", "name": "Rock", "size": 4200},
{"id":"35", "name": "Light", "size": 4000},
{"id":"36", "name": "Weather", "size": 3800},
{"id":"37", "name": "Environment", "size": 3600},
{"id":"38", "name": "Country", "size": 3400},
{"id":"39", "name": "New", "size": 3200},
{"id":"40", "name": "Money", "size": 3000},
{"id":"41", "name": "Bike", "size": 2800},
{"id":"42", "name": "Energy", "size": 2600},
{"id":"43", "name": "Whoole", "size": 2400},
{"id":"44", "name": "Wood", "size": 2200},
{"id":"45", "name": "Water", "size": 2000},
{"id":"46", "name": "Road", "size": 1800},
{"id":"47", "name": "Sun", "size": 1600},
{"id":"48", "name": "Car", "size": 1400},
{"id":"49", "name": "Gas", "size": 1200},
{"id":"50", "name": "Oil", "size": 1000}
]
},
{
"children": [
]
}
]
},
{
"children": [
]
}
]
}A partir de ceci, je sais comment faire pour rendre la bulle rouge lorsque je clique dessus.
Je sais aussi comment faire pour afficher une alerte quand je clique sur la bulle (par exemple affiche "toto").
Or, je n'arrive pas à récupérer la valeur du texte du cercle (càd le texte qui est dans la bulle) pour l'afficher automatiquement dans le message d'alerte.
Pouvez vous m'aider à trouver une solution svp ?
Merci