Javascript Girl
  1. Javascript Girl
  3. D3.js: Modification de la couleur de la barre en fonction de la valeur
Intereting Posts
Javascript: Pourquoi parfois l'alerte () ne fonctionne pas, mais console.log () fait-il? Liez plus d'arguments d'une fonction déjà liée dans Javascript Comment rendre WebStorm résoudre les modules qui sont des fonctions? Quelque chose semblable à treegrid dans jqGrid Détectez Windows 64 bits ou 32 bits à partir de l'agent utilisateur ou de Javascript? GetElementsByClassName produit une erreur "undefined" IFrame bloqué en raison des protocoles, des domaines et des ports doit correspondre Enregistrement stylisé de la console Renvoyez ceci || (0, eval) ('ceci'); Pourquoi mon backbone.View.constructor .__ super__ indéfini si j'utilise _.bindAll (this) JQuery / Script Conflict Issue Unbinding $ watch in angularjs after called Est-il possible d'obtenir le prochain frère ou sœur en utilisant cssContainingText dans Protractor Activation de jQuery Intellisense dans le fichier JavaScript dans Webmatrix Calculer le chemin le plus court entre deux points géo?

D3.js: Modification de la couleur de la barre en fonction de la valeur

J'ai expérimenté le diagramme à barres de d3.js, je veux changer la couleur en fonction de la valeur de l'axe y, comment puis-je réaliser cela. J'ai essayé d'ajouter des gradients linéaires, mais je perds le contrôle.

Le code sur lequel je travaille est basé sur ceci: http://bost.ocks.org/mike/bar/

Ajoutez les attributs suivants pour adapter la couleur: 

var data = [4, 8, 15, 16, 23, 42]; var width = 420, barHeight = 20; var x = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, width]); var chart = d3.select(".chart") .attr("width", width) .attr("height", barHeight * data.length); var bar = chart.selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); bar.append("rect") .attr("width", x) // add this attribute to change the color of the rect .attr("fill", function(d) { if (d > 25) { return "red"; } else if (d > 10) { return "orange"; } return "yellow"; }) .attr("height", barHeight - 1); bar.append("text") .attr("x", function(d) { return x(d) - 3; }) .attr("y", barHeight / 2) .attr("dy", ".35em") // add this attribute to change the color of the text .attr("fill", function(d) { if (d > 10) { return "white"; } return "black"; }) .text(function(d) { return d; }); 
 .chart text { font: 10px sans-serif; text-anchor: end; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg class="chart"></svg>

Vous devrez utiliser l'échelle quantile pour inclure la couleur. Vous pouvez obtenir de la documentation ici https://github.com/mbostock/d3/wiki/Quantitative-Scales

Vous pouvez également consulter http://colorbrewer2.org/ pour la gamme de couleurs. 

 var data = [4, 8, 15, 16, 23, 42]; var colors = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"]; var colorScale = d3.scale.quantile() .domain([0, colors.length - 1, d3.max(data, function(d) { return d; })]) .range(colors); var x = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, 420]); d3.select(".chart") .selectAll("div") .data(data) .enter().append("div") .style("width", function(d) { return x(d) + "px"; }) .style("background-color", function(d) { return colorScale(d); }) .text(function(d) { return d; }); 
 .chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div class="chart"></div>