Comment colorer le diagramme à bulles js DC en fonction de la valeur de la colonne?

Question

Je suis assez nouveau pour js dc et j'ai essayé de mettre en place un graphique à bulles dans DC js avec un code de couleur personnalisé, mais n'ont pas eu la chance jusqu'à présent. Le graphique à bulles fonctionne bien avec l'échelle de couleurs "d3.scale.category20()" mais génère une erreur "_colors.range n'est pas une fonction" si j'essaie de lui donner une échelle de couleurs personnalisée.

Je souhaite donner une couleur différente en fonction de la plage de la variable "sic". Par exemple: si la valeur est comprise entre 0 et 1000, elle devrait être rouge, 1000-2000, elle devrait être bleue et ainsi de suite.

J'ai essayé de créer une échelle ordinale d3 et de spécifier le domaine et la plage pour les valeurs correspondantes, puis dans la fonction accesseur couleur, j'ai essayé de retourner la valeur du domaine en fonction de la valeur de la variable), mais quand je vérifie le code du navigateur, je reçois un « _colors.range est pas une fonction » TypeError

est ici les js dc complet et le code de crossfilter

var industryChart = dc.bubbleChart("#industry-chart"); 


// load data from a csv file 
d3.csv("df_20topics_5types.csv", function (data) { 

data.forEach(function(d) { 
d.cik=+d.cik; 
d.year = +d.year; 
d.sic = +d.sic; 
d.type_count = +d.type_count; 
d.sic2 =+d.sic2; 
d.sic3 = +d.sic3; 
d.maxtopic = d.maxtopic; 
d.maxweight = +d.maxweight; 
d.topic0 = +d.topic0; 
d.topic1 = +d.topic1; 
//d.month = +d.month; 
//console.log(d.topic0) 
}); 


var facts = crossfilter(data); 
var all = facts.groupAll(); 

var sicValueOrig = facts.dimension(function (d) { 
// console.log(d.sic); 
return d.sic; 
// add the SIC dimension 

}); 
var sicValueGroupCountOrig = sicValueOrig.group() 
.reduceSum(function(d) { return d.type_count; }); 


var colorScale = d3.scale.ordinal().domain(["000","1000","2000",""]) 
     .range(["#FF0000", "#00FF00", "#0000FF"]); 

industryChart.width(990) 
       .height(280) 
       .x(d3.scale.pow(2)) 
       //.xaxis() 
       .margins({top: 10, right: 50, bottom: 30, left: 80}) 
       .dimension(sicValueOrig) 
       .group(sicValueGroupCountOrig) 

       //.colors(d3.scale.category20()) 
       .colorAccessor(function(d){ 

        if(d.key < 1000) 
        return "000"; 
        else if (d.key > 1000 && d.key < 2000) 
        return "1000"; 
        else if (d.key > 2000 && d.key < 3000) 
        return "2000"; 

        //console.log(d.key); 
       }) 
       .colors(function(d){ 
        return colorScale(d); 
       }) 
       .keyAccessor(function (p) { 
        // console.log(p) 
        return p.key; 
       }) 
       .valueAccessor(function (p) { 
        return p.value; 
       }) 
       .radiusValueAccessor(function (p) { 
        return p.value; 
       }) 
       .r(d3.scale.linear().domain([0, 200000])) 
       .minRadiusWithLabel(5) 
       .elasticY(true) 
       .yAxisPadding(100) 
       .elasticX(true) 
       .xAxisPadding(200) 
       .maxBubbleRelativeSize(0.10) 
       .renderHorizontalGridLines(true) 
       .renderVerticalGridLines(true) 
       .renderLabel(true) 
       .renderTitle(true) 
       .title(function (p) { 
        return "SIC number: "+p.key+"\nTotal Count: "+p.value; 
       }).xAxis().tickValues([]); 
     industryChart.yAxis().tickFormat(function (s) { 
      return s + " filings"; 
     }); 


     dc.renderAll(); 

Ce serait un grand aider si l'un d'entre vous pourrait signaler ce que je fais de mal et suggérer une solution. Je vous remercie.

Answer 1

Je pense que vous regardez le version 2.0 documentation for chart.colors() mais en utilisant la version 1.7 ou ci-dessous. Dans les versions antérieures, la fonction prenait une échelle, pas une fonction.

Sauf si vous avez une bonne raison, je pense qu'il est préférable de passer l'échelle ici, plutôt qu'une fonction appelant l'échelle.

Ainsi, au lieu de

  .colors(function(d){ 
       return colorScale(d); 
      }) 

essayer

  .colors(colorScale) 

Cela dit, je pense que votre code devrait fonctionner avec dc.js 2.0, qui a été publié au début de cette année.