D3.js force graphe orienté, chaque groupe de couleur différente?
J'ai fait une force dirigée en graphique avec d3.js plugin, et je veux de la couleur, les nœuds et les étiquettes avec la couleur différente en fonction du groupe auquel ils appartiennent.
J'ai ajouté de l'échelle de couleur:
var color = d3.scale.category20();et une variable de nœud, j'ai ajouté:
.style("fill", function(d) { return color(d.group); })mais tous les nœuds sont de la même couleur..
Voici ma situation actuelle: http://jsfiddle.net/WBkw9/
le script complet:
var links = [
{source: "John", target: "Mike", group: "5"},
{source: "John", target: "Janice", group: "5"},
{source: "John", target: "Caleb", group: "5"},
{source: "John", target: "Anna", group: "4"},
{source: "John", target: "Tommy", group: "3"},
{source: "John", target: "Jack", group: "2"},
{source: "John", target: "Vilma", group: "1"},
];
var nodes = {};
//Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var color = d3.scale.category20();
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
node.append("circle")
.attr("r", 8);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}ce qui me manque de couleur différente sur chaque groupe?
OriginalL'auteur dzordz | 2013-07-24
Vous devez vous connecter pour publier un commentaire.
Votre problème, c'est que
groupn'est pas définie pour vos données. En conséquence, tous les nœuds sont de couleur pour le groupe 'undefined'. L'un de vos cercles sont définis pour les données deforce.nodes(), qui ont les attributsindexnamepxpyweightxety.groupest défini uniquement pour les liens, qui n'ont jamais la couleur appliquée.Tel qu'il est actuellement, il n'y a pas un moyen évident de déterminer quelle est la couleur d'un nœud doit être. Qu'advient-il si de plus qu'un lien se connecte à un nœud, et ces liens sont dans des groupes différents?
OriginalL'auteur ckersch
Voici mon code (basé sur http://bl.ocks.org/mbostock/4062045). Il fonctionne parfaitement.
Vous pouvez voir à quoi ça ressemble ici : http://jsfiddle.net/Rom2BE/H2PkT/
Chaque groupe a une couleur différente.
OriginalL'auteur Romain
Votre groupe info n'est disponible que dans la
linksobjet, comme @ckersch l'a déjà souligné. Vous devez ajouter le groupe info pour vousnodesobjet de trop. Pour cet exemple qui peut être fait en changeant la ligne 16 dans:Mais pour des données plus complexe, avec plus d'un
source, toutes les sources sont de la même couleur (ou serait-ce OK?).J'ai fait ce changement en ce Violon: http://jsfiddle.net/WBkw9/19/.
OriginalL'auteur ᴠɪɴᴄᴇɴᴛ
Je pense que vous avez besoin de changer l'attribut de style de le cercle, pas la
gélément.Edit: Le groupe de la propriété dans les données doivent également être changé entiers, ou de jeter plus tard.
Le groupe doit être un entier, pas une chaîne de caractères.
d3.selectAll("circle").style("fill", function(d) { return color(9)})changé la couleur de tous les cercles.OriginalL'auteur user4815162342
Avez-vous jamais résoudre ce problème? si ce n'est une solution possible est ici: http://jsfiddle.net/adeaver/F2fbu/1/
Chaque groupe/node est de couleur différente avec le texte correspondant en ajoutant:
.style("fill", function(d) { return color(d.group); })le texte ajouter et
group: link.groupà la fonction qui calcule le nombre de nœuds à partir des liensOriginalL'auteur AnthonyDeaver