L'Amélioration De La D3 Séquence Sunburst Exemple

Vous pouvez utiliser une échelle ordinale à la carte des couleurs pour les différents noms de nœud. La mise en œuvre, il n'aurait besoin que d'apporter quelques modifications mineures à votre code existant.

L'étape 1. Créer une échelle ordinale pour les couleurs

Au lieu d'avoir colors être simplement une liste de noms de couleur, codée en dur à des noms spécifiques, l'utilisation d3.l'échelle.ordinal(), et de définir la .range() être un tableau de couleurs que vous souhaitez utiliser. Par exemple:

var colors = d3.scale.ordinal()
  .range(["#5687d1","#7b615c","#de783b","#6ab975","#a173d1","#bbbbbb"]);

Cela permettrait de créer une échelle ordinale qui utilise les mêmes couleurs que l'original de visualisation. Vos données aurait besoin de plus de couleurs, vous voulez ajouter un peu plus à votre portée, sinon les couleurs sont répétés.

Comme un raccourci, vous pouvez utiliser d3.l'échelle.category20() laisser d3 choisir une plage de 20 catégorique couleurs pour vous.

Maintenant lors du réglage des couleurs de remplissage pour votre path élément arcs et aussi votre chapelure, vous pouvez tout simplement utiliser colors(d.name) au lieu de colors[d.name].

L'étape 2. L'utilisation de vos données pour construire le domaine de l'échelle

La .domain() de cette envergure seront fixées une fois que nous avons données, car il dépendra de la liste des noms uniques contenues dans les données. Pour ce faire, vous pouvez parcourir les données, et de créer un tableau de noms uniques. Il y a sans doute plusieurs façons de le faire, mais voici un qui fonctionne bien:

var uniqueNames = (function(a) {
  var output = [];
  a.forEach(function(d) {
    if (output.indexOf(d.name) === -1) {
      output.push(d.name);
    }
  });
  return output;
})(nodes);

Cela crée un tableau vide, puis une boucle sur chaque élément de la nodes tableau et si le nom du noeud n'existe pas déjà dans le nouveau tableau, il est ajouté.

Ensuite, vous pouvez simplement définir le nouveau tableau pour être le domaine de l'échelle de couleurs:

colors.domain(uniqueNames);

L'étape 3. Utilisez l'échelle du domaine pour construire la légende

Depuis la légende, va dépendre le domaine, assurez-vous que le drawLegend() fonction est appelée après que le domaine est défini.

Vous pouvez trouver le nombre d'éléments dans le domaine (pour le réglage de la hauteur de la légende) en appelant colors.domain().length. Ensuite, pour la légende du .data(), vous pouvez utiliser le domaine lui-même. Enfin, pour définir la couleur de remplissage des boîtes de légende, vous appelez à l'échelle des couleurs sur d étant donné que chaque élément dans le domaine est un name. Voici ce que ces trois changements à la légende dans la pratique:

var legend = d3.select("#legend").append("svg:svg")
  .attr("width", li.w)
  .attr("height", colors.domain().length * (li.h + li.s));

var g = legend.selectAll("g")
  .data(colors.domain())
  .enter().append("svg:g")
  .attr("transform", function(d, i) {
     return "translate(0," + i * (li.h + li.s) + ")";
  });

g.append("svg:rect")
  .attr("rx", li.r)
  .attr("ry", li.r)
  .attr("width", li.w)
  .attr("height", li.h)
  .style("fill", function(d) { return colors(d); });

Et c'est à ce sujet. Espérons que cela aide.

Voici la mise à jour JSFiddle.